reactjs - 同一 react 组件的多个实例

Question

我想向非 React 站点添加一个 React 组件，一个评论功能。

该网站有一个可无限滚动的新闻页面。在每个新闻报道下，我想包含 react 评论组件。我计划在 FB 教程之后对其进行建模:http://facebook.github.io/react/docs/tutorial.html

我的问题是，如何动态地将每个 React 组件挂载到 DOM 故事元素？基本上，我希望拥有相同 React 评论组件的许多实例，但每个实例都与一个独特的故事 (div) 相关联。

我认为我需要在服务器端渲染 react 组件，我可以在服务器端动态设置React.renderComponent。任何指示/示例表示赞赏。

Answer 1

添加帖子后，您需要拥有数据和目标 dom 节点(我们将这些变量称为 data 和 el)

React.render(<MyComponent data={data} />, el);

或者没有 JSX

React.render(React.createElement(MyComponent, {data: data}), el);

清理:

React.unmountComponentAtNode(el);

对于服务器端渲染，您可以执行以下操作:

React.renderToString(React.createElement(MyComponent, {data: data}))

只要结果在客户端最终为 el ，您就可以如上所述使用 React.render 挂载它。