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 代码必须 "compiled"，通常使用 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 会自动更新。

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

Rails-React 不适用于 ES6

Rails-React not working with ES6

javascript

ruby

ruby-on-rails

reactjs

react-rails