Reactjs 当componet标记位于字符串中时，如何呈现组件？

我从一个包含组件标记的RESTAPI获取字符串。 以下是示例字符串：-

let stringFromAPI = "Lorem ipsum dolor sit amet, <TooltipComponent>consectetur</TooltipComponent> adipiscing elit. Non enim, <ButtonComponent>si omnia</ButtonComponent> non sequebatur, idcirco non erat ortus illinc. Re mihi non aeque satisfacit, et quidem locis pluribus. Ita relinquet duas, de quibus etiam atque etiam consideret. Ad <TooltipComponent>corpus</TooltipComponent> diceres pertinere-, sed ea, quae dixi, ad corpusne refers?"

让stringFromAPI=“Lorem ipsum door坐在一张桌子上，为精英们服务。非enim，是omnia非sequebatur，是Idccirco非erat或illinc。不满足，是一个地方，是一个地方。它放弃了两个，一个地方，一个地方，一个地方，一个地方，一个地方。”

渲染时，组件将显示为文本，而不是渲染。 如何使字符串中的组件呈现

    render() {
        return ( <div>{stringFromAPI}</div>
    )
}

render（）{
返回（{stringFromAPI}
)
}

---

危险的html={{{uuuuHTML:rawMarkup}}只呈现html元素而不呈现组件。

我假设您可以访问后端源代码。在这种情况下，您需要首先将React组件呈现为字符串，然后将它们连接并附加到前端的DOM中

使用

ReactDOMServer.renderToString

将React组件转换为字符串

---

这可能会给你一个想法

因此，本例中的标记是：Concertetur、si omnia和corpus？也许如果你准备了一个JSFIDLE，它会更容易解决你的问题。编辑的问题请现在查看。这不重复，我正在尝试用ReactJS呈现组件而不是html。你可以循环通过从服务器获得的字符串，无论何时你找到

'

。您可以让一个函数为您执行此操作，它将返回一个对象列表或列表列表，其中每个组件都有一个对象或列表，并带有开始和结束索引。然后，您将按开始和结束多次对字符串进行切片，以获取组件，并将它们与原始html分开呈现。但我想使用材质ui组件。material ui的组件的事件不起作用。@TOM，

renderToString

仅生成HTML，事件绑定需要JS的帮助。看看这个伟大的答案：。要进行事件绑定，您可能需要稍微修改一下您的体系结构。如果您能分享任何可以帮助我的事件绑定示例，那将非常有帮助。@TOM，

ReactDOM.render

是为React组件附加事件处理程序的唯一（简单）方法。这个JSFIDLE示例显示仅传递字符串是不够的。因此，如果需要事件绑定，必须让前端执行组件代码，并使用

ReactDOM.render

将其呈现给DOM。实际上，你可能对一个叫做“同构应用”的术语感兴趣。这是一个大话题，你可以在网上找到很多例子。