首页 文章

使用Ruby On Rails应用程序中的Webpack在ReactJS组件中进行代码拆分

提问于
浏览 次
0

我正在使用Webpack gem在Rails应用程序中使用ReactJS组件 . 但React组件仅加载到Rails应用程序布局中的相关位置 . 如果我有3个不同的React组件，它会在每个页面中给出 Target container is not a DOM element. 错误 .

原因是我在每个React文件中都有以下渲染调用 .
ReactDOM.render(<One />, document.getElementById('firstSection'));
ReactDOM.render(<Two />, document.getElementById('secondSection'));
ReactDOM.render(<Three />, document.getElementById('thirdSection'));

此外，我将这些组件导入 javascript/packs/application.js 如下所示 .

import One from './Components/One'
import Two from './Components/Two'
import Three from './Components/Three'

为了解决我的问题，我想使用路由拆分这些文件 . 有谁知道如何做到这一点？或任何其他解决方案将不胜感激 .
所有教程仅用于完整的反应应用程序，我的情况不同 .

javascript ruby-on-rails reactjs webpack

1 回答

  • 0

    最后，我可以通过研究更多关于Webpack和ReactJs来解决这个问题 . 步骤如下 .
    我使用了react-rails宝石 .
    2.删除了在每个组件中调用 ReactDOM.render(); 函数 .
    相反，我为相关地方添加了 <%= react_component("One", { user_id: 1 }) %> ，我想在Rails视图中调用React Components .

    Tips ：
    我必须运行这些命令来生成 app/javascript/packs/application.js 和 app/javascript/packs/server_rendering.js 文件 .

    $ bundle install
   $ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
   $ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
   $ rails generate react:install

    这很好用 . 有关更多信息，请阅读React-Rails Gem文档 .

    回复于

相关问题