同一react组件的多个实例

IT技术 reactjs
2021-04-25 09:46:08

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

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

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

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

1个回答

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

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 挂载它。