新反应 v15.4.2 循环数据上的 getInitialState
getInitialState on new react v15.4.2 loop data
如何在新版本的反应循环数据上使用getInitialState
旧版本的 React 是这样工作的
getInitialState() {
return {
Thumbnails: [{ url: 'sample_url', name: 'sample_name' }] // this works fine
};
}
我正在使用 laravel 和 gulp 但是当我包含数据名称和 url
加载的数据有一些错误。我无法确定导致错误的原因
我在组件中加载渲染函数。
我从 laracast 观看了以下说明,但他们在 react 上使用的是较低版本,另一件事是他们在 createClass 中加载渲染函数。
我唯一的问题是使用 JSON DATA
加载状态的正确方法
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.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>
);
}
}
如何在新版本的反应循环数据上使用getInitialState
旧版本的 React 是这样工作的
getInitialState() {
return {
Thumbnails: [{ url: 'sample_url', name: 'sample_name' }] // this works fine
};
}
我正在使用 laravel 和 gulp 但是当我包含数据名称和 url
加载的数据有一些错误。我无法确定导致错误的原因
我在组件中加载渲染函数。
我从 laracast 观看了以下说明,但他们在 react 上使用的是较低版本,另一件事是他们在 createClass 中加载渲染函数。
我唯一的问题是使用 JSON DATA
加载状态的正确方法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.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>
);
}
}