如何在 webpacker 中使用 react-rails？

Question

我用 webpacker 创建了示例项目 react-rails。但显示错误“未捕获的引用错误：未定义人员”。帮助我 如何在 webpacker 中使用 react-rails？我进行的处理如下。

Rails 版本

$ rails -v
Rails 5.0.2

宝石版

react-rails (2.1.0)
webpacker (1.1)

创建 Rails 项目

$ rails new example

将 webpacker 和 react-rails 添加到 Gemfile

gem 'webpacker', github: 'rails/webpacker'
gem "react-rails"

安装 webpacker 并做出反应

$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

创建控制器

$ bin/rails g controller home

添加路线

config/routes.rb
root "home#index"

添加反应组件

$ bin/rails g react:component person name --es6

添加 react_component 标签

app/views/home/index.html.erb
<%= react_component("Person", { name: "Hello" }) %>

将 javascript_pack_tag 添加到 application.html.erb

app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application' %>

运行服务器

$ bin/rails s
$ bin/webpack-dev-server

显示错误控制台

VM27375:1 Uncaught ReferenceError: Person is not defined
    at eval (eval at module.exports (fromGlobal.js?fc31:13), <anonymous>:1:1)
    at module.exports (fromGlobal.js?fc31:13)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js?cbbb:16)
    at Object.mountComponents (index.js?c0e8:82)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js?c0e8:124)
    at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)

示例项目

https://github.com/yokochi/webpacker_example

Answer 1

重命名app/javascript/components/person.js为app/javascript/components/Person.js（例如大写）

或者用react_component('person')它代替。

太长了；资本化问题。