getInitialState для новых данных цикла прореагировать v15.4.2
Как использовать getInitialState в новой версии данных цикла реакции
старая версия реакции работает следующим образом
getInitialState() {
return {
Thumbnails: [{ url: 'sample_url', name: 'sample_name' }] // this works fine
};
}
Я использую Laravel с Gulp, но когда я включаю имя данных и URL
загруженные данные делают некоторые ошибки. Я не могу определить причину ошибки
Я загружаю функцию рендеринга в компонент.
Я наблюдал следующую инструкцию от laracast, но они используют более низкую версию для реакции, и еще одна вещь — они загружают функцию рендеринга в createClass.
Мой единственный вопрос — правильный способ загрузки состояния с помощью данных JSON
Thumbox.js
import React from 'react';
import ReactDOM from 'react-dom';
class Thumbox extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// this fails
Thumbnails: [{
url: '#sample',
ename: 'Hello'
}]
// this works
// Thumbnails: []
}
}
render() {
var newThumbnail = function(tb) {
return <Thumbnail ename={tb.ename} url={tb.url} />
};
return (
<div>
<h1>Working with React</h1>
<ul>
{ this.state.Thumbnails.map(newThumbnail) }
</ul>
</div>
);
}
}ReactDOM.render(<Thumbox />, document.getElementById('app-react'));
Thumbnail.js
import React from 'react';
import ReactDOM from 'react-dom';
class Thumbnail extends React.Component {
render() {
return (
<li>
<a className="thumb" href={ this.props.url } >{this.props.ename}</a>
</li>
);
}
}
Решение
Вам нужно экспортировать компонент Thumbnail из Thumbnail.js, а затем импортировать его в Thumbbox.js, чтобы ваш код работал. Сделайте это, и это должно работать правильно
Thumbox.js
import React from 'react';
import ReactDOM from 'react-dom';
import Thumbnail from './path/to/Thumbnail';
class Thumbox extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// this fails
Thumbnails: [{
url: '#sample',
ename: 'Hello'
}]
// this works
// Thumbnails: []
}
}
render() {
var newThumbnail = function(tb) {
return <Thumbnail ename={tb.ename} url={tb.url} />
};
return (
<div>
<h1>Working with React</h1>
<ul>
{ this.state.Thumbnails.map(newThumbnail) }
</ul>
</div>
);
}
}ReactDOM.render(<Thumbox />, document.getElementById('app-react'));
Thumbnail.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class Thumbnail extends React.Component {
render() {
return (
<li>
<a className="thumb" href={ this.props.url } >{this.props.ename}</a>
</li>
);
}
}
Другие решения
Других решений пока нет …