目标:我想将包含React组件的字符串转换为完全功能的JSX。
更简单的例子是这个,Stack Overflow上有很多解决方案:
render()
{
let txt = "<span><b>Hello World!</b></span>";
return <div dangerouslySetInnerHTML={{__html: txt}}></div>;
//---OR---
return ReactHtmlParser(txt); //using react-html-parser
//---OR---
return parse(txt); //using html-react-parser
}
但是,如果相反地,
let txt = "<MyComponent/>"
,其中MyComponent是一个自定义的React组件,我找不到一种方法让浏览器正确解释它。使用一些方法,它将变为小写字母
<mycomponent><mycomponent/>
。通过其他技巧,我可以将其作为大写字母<MyComponent><MyComponent/>
插入DOM中。但是浏览器不会将MyComponent视为React组件,也不会执行内部代码。我对答案
React.createElement()
不感兴趣,因为我不想每次只用一个组件。我想解析长的JSX字符串。