Question

我正在使用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'

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

Answer 1

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

提示：
我必须运行这些命令来制作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宝石文档。

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

1 个答案: