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.

这是我的代码的问题还是宝石没有正确编译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

我当前的网络包文件：

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

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

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

Rails-React不能与ES6一起使用

2 个答案: