新反应 v15.4.2 循环数据上的 getInitialState

Question

如何在新版本的反应循环数据上使用 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'));

缩略图.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>
        );
    }
}

Answer 1

您需要从 Thumbnail.js 导出 Thumbnail 组件，然后将其导入 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'));

缩略图.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>
        );
    }
}