Я использую камень с реактивными рельсами, и я пытаюсь написать несколько компонентов в 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?
Есть опция в команде generate
rails generate react:component Label label:string --es6
https://github.com/reactjs/react-rails#options
В противном случае вы можете использовать webpack
для настройки интерфейса и использования babel
.
Обычно код 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 автоматически обновляется.
Вам потребуется активировать исходные карты в вашем браузере для отладки кода.