Question

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

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')。

TLDR;资本化很重要。

Answer 2

@Akio Yamazaki

https://github.com/yokochi/webpacker_example/commit/55ca96c1257e611dfb17b27fe53b402a97d5dedc#diff-0c7c7cb70dec34ec9dcff19a0f5bd40bR1

您应该在组件和导出组件

中要求（＆＃39;做出反应）

试试这个......

var React = require("react")

class Person extends React.Component {
  render () {
    return (
      <div>
        <div>Name: {this.props.name}</div>
      </div>
    );
  }
}

Person.propTypes = {
  name: React.PropTypes.node
};

module.exports = Person

但这种方式更好

import React from 'react'

class Person extends React.Component {
  constructor(props){
    super(props)
  }

  render() {
    <div>Name: {this.props.name}</div>
  }
}

export default Person

...或

import React from 'react'

const Person = (props) => (
  <div>Name: {this.props.name}</div>
)

export default Person

我有一个回购可能能够提供一些参考

https://github.com/kakas/react-rails_with_webpacker_example/commits/master

Answer 3

也许为时已晚，我遇到了同样的问题，并且解决了Gemfile中更改版本的问题；这应该工作：

gem 'react-rails', '~> 1.7', '>= 1.7.1'

如何使用react-rails与webpacker？

3 个答案: