Javascript 从HTML字符串呈现React组件

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

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

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

我尝试按照本讨论中的说明使用危险的LysetinerHTML：

我还尝试了React库，比如React html parse和html React parser。没有成功

当我使用AngularJS1时，我使用了一些小指令来处理这种情况。我需要用React实现同样的目标。 有什么想法吗

编辑：如果有人感兴趣，我找到了一个图书馆来处理这个问题：

---

我的建议是你做如下的事情

首先设置一个状态变量，使其等于要返回的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"));

---

以前从没试过。我想知道这是否真的会起作用：

你能在这里发布html字符串或小模板吗，因为如果它是使用DangerouslySetinerHTML的html，那么它应该可以正常工作使用DangerouslySetinerHTML有什么问题吗？你试图做的是需要传输内容，因为它包含jsx。这将是非常困难的。相反，如果您控制端点，最好只返回可由组件呈现的json可序列化数据。Stretch0：无论我如何尝试，它都不起作用。在本例中，它也不起作用：。对特里辛：好吧，这会破坏我试图构建的东西背后的整个理念……所以，我需要让它发挥作用：-@TomaszBubała不，它不起作用。如果检查DOM，您将看到它没有呈现组件，而是呈现无效的html节点。根据浏览器的不同，它可能会以任何方式渲染它。但它根本不是一种反应成分。这只是因为jsx看起来像是有效的html标记，但事实并非如此。React转义包含html的字符串。这将作为字符串而不是标记呈现。同样在OPs中，标记实际上是jsx而不是html。这甚至可以工作，但非常简单。如果我正确理解OP，他希望在一个成熟的CMS系统中使用它。存在一些可以动态呈现jsx的库，但它更倾向于用作交互式游乐场。是其中之一。老实说……我真的不明白那里发生了什么。但我知道这与这里描述的非常相似，我成功地实现了这一点：这已经是一个良好的开端。我可以创建一个对象，其中包含对可能需要的所有相关组件的引用，然后对从服务器接收的HTML字符串进行一些操作，以输出这些元素。将是非常混乱的实施，因为我可能需要通过道具。在我的AngularJS实现中，它只是按原样解析。。。