如何在同一页面的多个位置使用同一个 React 应用程序?
How can I use the same React app in multiple locations of the same page?
我使用 create-react-app 创建了一个小型计算器应用程序。
目前它是我正在开发的本地独立应用程序。我的目标是将其集成到现有的服务器端渲染网站中。
我想知道一些事情:
- 我如何将此应用程序从 create-react-app 集成到现有网站中?
- 我如何才能将 React 应用程序嵌入同一页面的多个 位置?
关于在顶层初始化应用程序,我目前正在做:
render(<App />, document.querySelector('#app'));
但这只能让我把它放在一个区域。
拥有多个应用程序的最佳方式是什么?不保持同一个状态,独立运作也没关系。
谢谢。
您可以简单地在多个容器中呈现应用程序。
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
我使用 create-react-app 创建了一个小型计算器应用程序。
目前它是我正在开发的本地独立应用程序。我的目标是将其集成到现有的服务器端渲染网站中。
我想知道一些事情:
- 我如何将此应用程序从 create-react-app 集成到现有网站中?
- 我如何才能将 React 应用程序嵌入同一页面的多个 位置?
关于在顶层初始化应用程序,我目前正在做:
render(<App />, document.querySelector('#app'));
但这只能让我把它放在一个区域。
拥有多个应用程序的最佳方式是什么?不保持同一个状态,独立运作也没关系。
谢谢。
您可以简单地在多个容器中呈现应用程序。
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