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

你不应该这样做。虽然在使用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字符串中呈现React组件

2 个答案: