javascript 动态 HTML 字符串以响应组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30715220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamic HTML String to react component
提问by Bharanidharan K
I would be getting dynamic html content from my template rendering which was rendered by other react components. How would I convert this html string to React component so that I can use the component in my render function. Note that I want to preserve react specific attributes used for diffing.
我将从我的模板渲染中获取动态 html 内容，该内容由其他 react 组件渲染。我将如何将此 html 字符串转换为 React 组件，以便我可以在渲染函数中使用该组件。请注意，我想保留用于差异的反应特定属性。
React.createClass( {
var self = this;
componentWillMountDown : function() {
//htmlString is essentially huge dynamic one in my actual case
var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>";
self.setState({responseString : htmlString});
self.forceUpdate();
},
render: function() {
var Response = this.state.responseString;
//how would I return the react component as response?
return (<Response/>); //does not work. err is it shd be valid react component
}
});I've tried converting htmlString to HTMLDocument object and recursively creating React.createElement in willmount callback and setting react component. however, the error is type toUpperCase is not defined.
我尝试将 htmlString 转换为 HTMLDocument 对象，并在 willmount 回调中递归创建 React.createElement 并设置 react 组件。但是，错误是未定义 toUpperCase 类型。
回答by Mike Nikles
A few hours ago, I published an html-to-reactmodule in npm (https://www.npmjs.com/package/html-to-react) that may help you.
几个小时前，我html-to-react在 npm ( https://www.npmjs.com/package/html-to-react) 中发布了一个模块，可能会对您有所帮助。
Please let me know if there's anything you need, I can certainly work with you to make the module more flexible.
如果您有任何需要，请告诉我，我当然可以与您合作，使模块更加灵活。
回答by Phi Nguyen
Because you store your component as string so you have to use dangerouslySetInnerHTML. This is my suggestion. I hope someone else will have the better answer. :)
因为您将组件存储为字符串，所以您必须使用dangerouslySetInnerHTML. 这是我的建议。我希望其他人会有更好的答案。:)
render: function() {
var self = this;
var Response = React.createClass({
render: function(){
return (<div dangerouslySetInnerHTML={{__html: self.state.responseString}}></div>)
}
});
return (
<Response />
)
}
回答by Mehdi Hoseini
You can use React HTML Parser. Here is the link React HTML Parser
您可以使用 React HTML 解析器。这是链接React HTML Parser
It's a utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.
它是一个将 HTML 字符串转换为 React 组件的实用程序。避免使用危险的 SetInnerHTML 并将标准 HTML 元素、属性和内联样式转换为它们的 React 等效项。
