从HTML字符串渲染React组件
我从AJAX请求中获取HTML字符串，看起来像这样：
<div> <SpecialComponent/> <SecondSpecialComponent/></div>
我需要的是能够在React组件中使用此字符串，因为它是有效的JSX。
我尝试使用dangerouslySetInnerHTML按照此讨论中的指示：how-to-parse-html-to-react-component
我也尝试过React库，比如react-html-parse和html-react-parser 。 没有成功
当我与AngularJS（1）合作时，我正在使用一些小指令来处理这种情况。 我需要用React来达到同样的效果。 有任何想法吗？
编辑：如果有人有兴趣，我发现一个图书馆，照顾这个问题：https://www.npmjs.com/package/react-jsx-parser
我的建议是你做下面的事情。
首先设置一个状态变量等于你想要返回的HTML
this.setState({html: response.data.html})
那么在你的回报中你可以做到以下几点
return (
{this.state.html}
);
你不应该这样做。 尽管使用JSX时React组件看起来像html标签，但它们实际上是类或函数。 你试图做什么等同于试图解析：
"<div>document.write('foo')</div>"
你真的在一个字符串中混合了一个javascript函数名和字符串形式的html标记。 您必须解析字符串以将React组件与周围的HTML标记分开，将React组件以字符串形式映射到其实际的React对应组件，然后使用ReactDOM.render将组件添加到页面。
let mapping = [
{"name":"<SpecialComponent/><SecondSpecialComponent/>","component":<SpecialComponent/><SecondSpecialComponent/>},
{"name":"<someOtherComponent/><someOtherComponent/>","component":<someOtherComponent/><someOtherComponent/>}
];
let markup = "<div><SpecialComponent/><SecondSpecialComponent/></div>";
let targetComponent;
mapping.forEach((obj) => {if(markup.indexOf(obj.name)>-1){
targetComponent=obj.component;//acquired a reference to the actual component
markup.replace(obj.name,"");//remove the component markup from the string
}
});
/*place the empty div at the target location within the page
give it an "id" attribute either using element.setAttribute("id","label") or
by just modifying the string to add id="label" before the div is placed in
the DOM ie, <div id='label'></div>*/
//finally add the component using the id assigned to it
ReactDOM.render(targetComponent,document.getElementById("label"));
以前从未尝试过。 我不知道这是否会实际工作:)
链接地址: http://www.djcxy.com/p/52159.html