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

【问题标题】：Code-Splitting in ReactJS Components with Webpack in Ruby On Rails App在 Ruby On Rails 应用程序中使用 Webpack 在 ReactJS 组件中进行代码拆分
【发布时间】：2018-06-28 13:07:04
【问题描述】：

我正在使用 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 应用程序，我的情况不同。

【问题讨论】：

document.getElementById('firstSection')的回报是什么
这将返回一个列表 (
- ...)。第二个，第三个也返回另一个列表元素，但在不同的页面中。
您在ReactDOM.render 运行时测试过它吗？（您在渲染调用之前使用断点或打印检查过吗？）
也许元素应该是一个空的div，所以react可以在那里渲染你的组件？

标签： javascript ruby-on-rails reactjs webpack

【解决方案1】：

最后我可以通过更多地研究Webpack 和 ReactJs 来解决这个问题。步骤如下。
1.我用react-railsGem。
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 Gem 文档。

【讨论】：