组件标签在字符串中时如何渲染组件？答案

【问题标题】：How to render components when componet tags are in a string?组件标签在字符串中时如何渲染组件？
【发布时间】：2016-12-08 05:04:05
【问题描述】：

我正在从包含组件标签的 rest API 获取字符串。以下是示例字符串：-

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?"

当我渲染它时，组件显示为文本而不是渲染。如何在字符串中渲染组件？

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

dangerouslySetInnerHTML={{__html: rawMarkup}} 只呈现 html 元素而不是反应组件。

【问题讨论】：

所以这个例子中的标签是：consectetur、si omnia和corpus？也许如果你准备了一个 jsfiddle 会更容易解决你的问题
问题已编辑，请立即查看。
这不重复我试图用 reactjs 渲染组件而不是 html
您可以遍历从服务器获取的字符串，每当您找到'<' 时，您就跟踪该索引，同样您跟踪'>' 的索引。您可以有一个函数为您执行此操作，它将返回一个对象列表或列表列表，其中包含具有开始和结束索引的每个组件的对象或列表。然后，您将通过 start 和 end 多次对字符串进行切片，以取出组件并将它们与原始 html 分开呈现。

标签： reactjs

【解决方案1】：

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

使用ReactDOMServer.renderToString 将 React 组件翻译成字符串。

这个JSFiddle 可能会给你一个想法。

【讨论】：

嗨，明，我的静态组件更换得很好。但我想使用 material-ui 组件。 material-ui 的组件的事件不起作用。
@TOM,renderToString只生成HTML，事件绑定需要JS的帮助。看看这个很棒的答案：stackoverflow.com/a/36234985/2021245。您可能需要稍微修改一下您的架构才能发生事件绑定。
如果您能分享任何可以帮助我的事件绑定示例，那将是非常有帮助的。
@TOM，ReactDOM.render 是为 React 组件附加事件处理程序的唯一（简单）方法。 jsfiddle.net/0kompn2d/1。这个 JSFiddle 是一个示例，显示仅传递一个字符串是不够的。因此，如果你想要事件绑定，你必须让前端执行组件代码并使用ReactDOM.render将其渲染到DOM。实际上，您可能对一个叫做“同构应用程序”的术语感兴趣。这是一个很大的话题，你可以在网上找到很多例子。