Question

如何在新版本的反应循环数据上使用getInitialState
旧版本的反应就像这样

getInitialState() {
   return { 
     Thumbnails: [{ url: 'sample_url', name: 'sample_name' }] // this works fine
   };
}

我正在使用laravel和gulp，但是当我包含数据名称和网址时加载的数据会产生一些错误。我无法识别导致错误的原因

我在组件中加载了渲染功能我从laracast看了下面的说明，但他们使用的是较低版本的反应，另一件事是他们在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>
        );
    }
}

Answer 1

您需要从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>
        );
    }
}

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

1 个答案: