Rails-React 不适用于 ES6

Question

我正在使用 react-rails gem，我正在尝试在 ES6 中编写一些看起来像这样的组件。

我的 link_list.js.jsx 文件

import Component from 'react';
import Links from 'link';

class LinkList extends React.component{
  constructor(props){
    super(props);
    this.sate = {};
  }

  getInitialState(){
    return { links: this.props.initialLinks}
  }


  render(){
    var links = this.state.links.map(function(link){
      return <Links key={link.id} link={link} />
    })

    return (
      <div className="links">
        {links}
      </div>
    )
  } 
}

我不断收到这个Uncaught ReferenceError: require is not defined 还有一个错误，上面写着Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

还有错误Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

这是我的代码有问题还是 gem 没有编译 ES6 的问题？

Answer 1

生成命令中有一个选项

rails generate react:component Label label:string --es6

https://github.com/reactjs/react-rails#options

否则，您可以使用webpack 设置前端并使用babel。

Answer 2

通常 React 代码必须“编译”，通常使用 Babel。

由于这不是“RoR”问题，我建议将 Rails 和 React 分开，在 RoR 中添加额外的 JS 层会令人困惑，更难调试且不必要。

您必须使用 webpack 生成一个 bundle.js 文件并从您的 rails 布局中调用它，这样 RoR 和 React 就不会相互污染。首先使用 npm 安装您需要的软件包，例如：

 $ npm i react --save
 $ npm i babel-preset-es2015 --save

然后编译 bundle.js

webpack -d --display-reasons --display-chunks --progress

我当前的 webpack 文件：

https://github.com/aarkerio/vet4pet/blob/master/webpack.config.js

使用“webpack -w”选项，这样当你对 .jsx 文件进行更改时，bundle.js 会自动更新。

您需要在浏览器上激活源映射来调试您的代码。