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

Question

我持久地将部分数据存储为自定义React组件的JSX字符串表示，我现在想要从数据库中检索并呈现给DOM。

我使用<Markup content={myJSX} />

尝试了https://github.com/milesj/interweave

我已尝试<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

如果你使用dangerouslySetInnerHTML，你必须编写html而不是JSX。

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

然后在你的渲染中

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