如何在同一页面的多个位置使用相同的React应用程序?

时间:2016-12-13 09:54:54

标签: javascript reactjs create-react-app

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

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

我想知道一些事情:

  1. 如何将此应用程序从 create-react-app 集成到现有网站中?
  2. 如何将React应用程序嵌入到同一页面的多个位置?
  3. 当谈到在顶层初始化应用程序时,我目前正在做:

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

    但这只允许我把它放在一个区域。

    拥有多个应用的​​最佳方式是什么?如果它们彼此不保持相同的状态并且独立运行则无关紧要。

    谢谢。

1 个答案:

答案 0 :(得分:2)

您只需在多个容器中呈现应用即可。

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