将字符串转换为自定义 JSX 元素并渲染它

Question

我将部分数据持久存储为自定义 React 组件的 JSX 字符串表示形式，现在我想从数据库中检索这些组件并渲染到 DOM。

我已经尝试使用https://github.com/milesj/interweave 使用<Markup content={myJSX} />

我试过<div dangerouslySetInnerHTML={{ __html:
${myJSX}
}} />

我试过了：

const teaserBoardHtml = `<div>test<br/> ${teaser_board} <br/> test</div>`
return (
    <div dangerouslySetInnerHTML={{__html: teaserBoardHtml }}></div>
);

teaser_board 是一个包含自定义反应组件的字符串

<MakeBoard {...someProps} /> 

它会呈现我放入字符串中的任何 HTML，但不会呈现我的自定义反应组件 - 它什么也不呈现。

例如，const teaserBoardHtml = '<div>test <br/>' + teaser_board + ' test</div>' 将渲染测试测试，但中间没有任何内容

这些都不起作用。有什么想法吗？

Answer 1

如果你使用危险的SetInnerHTML，你必须写html而不是JSX。

const myHtml = '<div class="toto"> <p> whatever </p> </div>'; 

然后在你的渲染中

render() {
    <div dangerouslySetInnerHTML = {{__html: myHtml }} />
}