如何在同一页面的多个位置使用同一个 React 应用程序？答案

【问题标题】：How can I use the same React app in multiple locations of the same page?如何在同一页面的多个位置使用同一个 React 应用程序？
【发布时间】：2016-12-13 09:54:54
【问题描述】：

我使用 create-react-app 创建了一个小型计算器应用程序。

目前它是我正在开发的本地独立应用程序。我的目标是将其集成到现有的服务器端渲染网站中。

我想知道一些事情：

如何将这个应用从 create-react-app 集成到现有网站中？
如何将 React 应用嵌入到同一页面的多个位置？

在顶层初始化应用时，我目前正在做：

render(<App />, document.querySelector('#app'));

但这只能让我把它放在一个区域。

拥有多个应用的最佳方式是什么？如果它们彼此不保持相同的状态并独立运行，那也没关系。

谢谢。

【问题讨论】：

标签： javascript reactjs create-react-app

【解决方案1】：

您可以简单地在多个容器中呈现应用程序。

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container1')
);

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container2')
);

这里是example

【讨论】：

谢谢 - 我没想到会这么简单。这样做有没有性能问题？
感谢您的帮助！