React-props

1.props和state的区别，state是内部的，内部的操作触发setState方法；props类似于Java的构造器传过来的参数，一般是外界传入的数据。

2.例子：主view由于点击事件，触发state中的数据变动，该state的数据又是子view的props中的数据

import React from 'react'

class MyOwnPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {datas: [], data: '', index: 0};
        this.clickButton = this.clickButton.bind(this);

    }

    render() {
        return (
            <div>
                <h1>已插入信息</h1>
                <DetailList datas={this.state.datas}/>
                <input id={'input'}></input>
                <button onClick={this.clickButton}>添加</button>

            </div>


        );
    }

//点击按钮的方法
    clickButton() {
        console.log("点击了提交" + this.state.data);


        this.setState((prevState) => (
                {data: document.getElementById('input').value})
            , function () {
                console.log("设置的数据完毕");
                var bean = {
                    value: this.state.data,
                    id: this.state.index
                };
                this.setState((prevState) => ({
                    datas: prevState.datas.concat(bean)
                }), function () {
                    console.log("数据长度" + this.state.datas.length);
                    this.setState((preState) => (
                        {index: preState.index + 1}
                    ));
                });
            });


    }
}

export default MyOwnPage;

//类似于自定义view====这里使用了props
class DetailList extends React.Component {

    render() {
        console.log("传递过来的数据长度" + this.props.datas.length);
        return (
            <ul>
                {this.props.datas.map(function (bean) {
                    console.log("这个的数据" + bean.id + bean.value);
                    return <li key={bean.id}>{bean.value}</li>;
                })}
                {/*es6的forEach*/}
                {/*{*/}
                {/*this.props.datas.map(bean => (*/}
                {/*<li key={bean.id}>{bean.value}</li>*/}
                {/*))*/}
                {/*}*/}
            </ul>
        );
    }

    test() {
        /*//遍历使用forEach*/

        {
            this.props.datas.forEach((bean) => (
                <li key={bean.id}>{bean.value}</li>))
        }

        {/*//遍历使用map*/
        }
        {
            this.props.datas.map(bean => (
                <li key={bean.id}>{bean.value}</li>
            ))
        }


//ES5的each
        {
            this.props.datas.forEach(function (bean) {
                console.log("数据如下：" + bean.key + bean.value);
                return <li key={bean.id}>{bean.value}</li>;
            })
        }
        //ES5的map
        {
            this.props.datas.map(function (bean) {
                return <li key={bean.key}>{bean.value}</li>;
            })
        }
    }
}