Rails-React не работает с ES6

5

Я использую камень с реактивными рельсами, и я пытаюсь написать несколько компонентов в 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?

Теги:
react-rails

2 ответа

2
Лучший ответ

Есть опция в команде generate

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

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

В противном случае вы можете использовать webpack для настройки интерфейса и использования babel.

  • 0
    Я думаю, я должен RTFM больше, ха-ха: P спасибо, это было прекрасно
0

Обычно код React должен быть "скомпилирован", как правило, с Babel.

Поскольку это не относится к "RoR", я бы рекомендовал оставить Rails и React разделенными, добавив лишние слои JS внутри RoR, запутывает, сложнее отлаживать и ненужно.

Вы должны сгенерировать файл bundle.js с помощью webpack и вызвать его из макета рельсов, таким образом 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 автоматически обновляется.

Вам потребуется активировать исходные карты в вашем браузере для отладки кода.

  • 0
    поскольку javascript является частью вашего веб-приложения, я придерживаюсь другого мнения и считаю, что это проблема RoR. Как насчет активов дактилоскопии? Почему желание включить CoffeeScript, Sass-компиляцию в RoR отличается от желания включить React в процесс компиляции ресурсов? Я не говорю, что это легко - то, что я говорю, - это то, что я предпочел бы, чтобы мое приложение React работало внутри Rails, - я вижу его как часть экосистемы веб-сайта, и поэтому предпочел бы решения, чтобы сохранить его таким.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню