同一反应组件的多个实例

Question

我想将一个 react 组件，一个 cmets 功能添加到一个非反应站点。

该网站有一个无限滚动的新闻页面。在每个新闻报道下，我都想包含 react cmets 组件。我打算在这里按照FB教程建模：http://facebook.github.io/react/docs/tutorial.html

我的问题是，如何将每个 React 组件动态安装到 DOM 故事元素？基本上，我希望有许多相同的 react cmets 组件实例，但每个实例都与一个独特的故事 (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 挂载它。