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

迈克尔·乔瓦尼·普莫(Michael Giovanni Pumo)

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

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

我想知道以下几件事:

  1. 我如何将这个应用程序从create-react-app集成到现有网站中?
  2. 如何将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')
);

这是一个例子

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在同一页面上运行多个应用程序部分

来自分类Dev

如何在同一页面上的Angular应用程序和非Angular应用程序之间通信?

来自分类Dev

如何在同一页面上的Angular应用程序和非Angular应用程序之间通信?

来自分类Dev

如何在同一页面的同一帖子上提交表单

来自分类Dev

如何在iframe中使用发送到同一页面的表单输出?

来自分类Dev

如何在不使用新标签页打开同一页面的情况下使用javascript刷新另一页面

来自分类Dev

如何在同一页面上为多个图使用单个xlabel和ylabel

来自分类Dev

如何在同一页面上使用多个 websocket?

来自分类Dev

如何在同一页面的URL中传递最后插入的ID

来自分类Dev

如何在同一页面的2个组件之间切换?

来自分类Dev

如何在Angular2中检测到同一页面的路由?

来自分类Dev

在Worklight应用程序的同一页面中显示本机和Web

来自分类Dev

来自同一页面上不同应用程序的CreateView和ListView。

来自分类Dev

Angular两个应用程序在同一页面上

来自分类Dev

如何解决browserify(基于Backbone的应用程序)与同一页面上的require.js之间的冲突?

来自分类Dev

在同一页面上使用多个指令

来自分类Dev

React Native Expo App-如何在同一页面中导出多个组件

来自分类Dev

当同一模板的两个实例在应用程序的多个位置中使用时,出现奇怪的行为

来自分类Dev

如何在同一页面上加载多个版本的jQuery插件?

来自分类Dev

如何在同一页面上处理多个表单

来自分类Dev

如何在Django的同一页面上具有多个相同形式

来自分类Dev

Django-如何在同一页面中使多个对象动态化

来自分类Dev

D3酒窝-如何在同一页面上显示多个酒窝图表?

来自分类Dev

如何在同一页面上呈现多个AmCharts(版本3)序列图?

来自分类Dev

如何在Codeigniter的同一页面中获取多个查询结果

来自分类Dev

如何在同一页面上加载具有不同数据的多个Chartjs图表?

来自分类Dev

如何在同一页面上从 Django 和 Ajax 获得多个发布请求?

来自分类Dev

如何在同一页面上使用具有相同 ID 的多个(动态)切换按钮?

来自分类Dev

单击菜单列表时如何在同一页面的DIV中加载HTML页面?

Related 相关文章

  1. 1

    如何在同一页面上运行多个应用程序部分

  2. 2

    如何在同一页面上的Angular应用程序和非Angular应用程序之间通信?

  3. 3

    如何在同一页面上的Angular应用程序和非Angular应用程序之间通信?

  4. 4

    如何在同一页面的同一帖子上提交表单

  5. 5

    如何在iframe中使用发送到同一页面的表单输出?

  6. 6

    如何在不使用新标签页打开同一页面的情况下使用javascript刷新另一页面

  7. 7

    如何在同一页面上为多个图使用单个xlabel和ylabel

  8. 8

    如何在同一页面上使用多个 websocket?

  9. 9

    如何在同一页面的URL中传递最后插入的ID

  10. 10

    如何在同一页面的2个组件之间切换?

  11. 11

    如何在Angular2中检测到同一页面的路由?

  12. 12

    在Worklight应用程序的同一页面中显示本机和Web

  13. 13

    来自同一页面上不同应用程序的CreateView和ListView。

  14. 14

    Angular两个应用程序在同一页面上

  15. 15

    如何解决browserify(基于Backbone的应用程序)与同一页面上的require.js之间的冲突?

  16. 16

    在同一页面上使用多个指令

  17. 17

    React Native Expo App-如何在同一页面中导出多个组件

  18. 18

    当同一模板的两个实例在应用程序的多个位置中使用时,出现奇怪的行为

  19. 19

    如何在同一页面上加载多个版本的jQuery插件?

  20. 20

    如何在同一页面上处理多个表单

  21. 21

    如何在Django的同一页面上具有多个相同形式

  22. 22

    Django-如何在同一页面中使多个对象动态化

  23. 23

    D3酒窝-如何在同一页面上显示多个酒窝图表?

  24. 24

    如何在同一页面上呈现多个AmCharts(版本3)序列图?

  25. 25

    如何在Codeigniter的同一页面中获取多个查询结果

  26. 26

    如何在同一页面上加载具有不同数据的多个Chartjs图表?

  27. 27

    如何在同一页面上从 Django 和 Ajax 获得多个发布请求?

  28. 28

    如何在同一页面上使用具有相同 ID 的多个(动态)切换按钮?

  29. 29

    单击菜单列表时如何在同一页面的DIV中加载HTML页面?

热门标签

归档