从 HTML 字符串渲染 React 组件

Question

我从 AJAX 请求中得到一个 HTML 字符串，看起来像这样：

<div> <SpecialComponent/> <SecondSpecialComponent/></div>

我需要的是能够在 React 组件中使用这个字符串，因为它是有效的 JSX。

我尝试按照此讨论中的说明使用dangerouslySetInnerHTML： how-to-parse-html-to-react-component

我也尝试过像 react-html-parse 和 html-react-parser 这样的 React 库。没有成功

当我使用 AngularJS(1) 时，我使用了一些小指令来处理这种情况。我需要用 React 达到同样的效果。 有什么想法吗？

编辑：如果有人感兴趣，我找到了一个处理这个问题的库： https://www.npmjs.com/package/react-jsx-parser

Answer 1

我的建议是您执行以下操作。

首先设置一个状态变量等于你要返回的 HTML

this.setState({html: response.data.html})

那么在您的退货中，您可以执行以下操作

   return ( 
   {this.state.html} 
   );

Answer 2

你不应该以这种方式做事。尽管 React 组件在使用 JSX 时看起来像 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"));

以前从未尝试过。我想知道这是否真的有效:)