react（二）父子组件间的数据传递---prop

react组件的数据分为两种，prop（代表property）和state。

1、父子组件间的数据传递主要使用prop。
2、子组件接收的prop的数据格式是由prop-types进行检测的，当不符合时，会在console控制台提出警告（可用于开发环境）。

prop的类型：不同的类型实现了父子组件间不同方向的数据传递

---

一、普通数据类型：可用于外部世界向子组件内部传递数据。

---

注意：这里是使用了create-react-app快速搭建了react结构。

（1）入口js文件：

其中ControlPanel是自定义组件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ControlPanel from './ControlPanel';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<ControlPanel />, document.getElementById('root'));
registerServiceWorker();

（2）ControlPanel自定义父组件的定义，其中Counter是子组件。

import React ,{Component} from 'react';
import Counter from './Counter';

export default class ControlPanel extends Component{
    render(){
        return (
            <div>
                {/*使用多个子组件，并且通过两个prop向子组件Counter进行数据传递：caption和initValue。*/}
                <Counter caption="First" initValue={0}></Counter>
                <Counter caption="Second" initValue={10}></Counter>
                <Counter caption="Third" initValue={20}></Counter>
            </div>
        )
    }
}

（3）Counter子组件内容：

注意：
当当前组件需要使用父组件通过prop传递过来的数据时，必须在构造函数的第一行调用父类（React.Component）构造函数，即super(props)。即this.props的赋值是React.Compnent构造函数的工作之一。

import React,{Component} from 'react';
// 注意：react最新版本已经将proptypes独立出来，需要自行安装prop-types才可以使用。
import PropTypes from 'prop-types';

//直接在定义组件的时候，将组件导出。
export default class Counter extends Component{
    constructor(props){
        super(props);
        this.onJia=this.onJia.bind(this);
        this.onJian=this.onJian.bind(this);
        this.state={
            // 使用父组件传递过来的初始值，这里可以用短路操作，也可以使用下面提到的defaultProps来进行设置
            counter:props.initValue||0
        }
    }
    onJia(){
        this.setState({
            counter:this.state.counter+1
        })
    }
    onJian(){
        this.setState({
            counter:this.state.counter-1
        })
    }
    render(){
        const btnStyle={
            margin:"0 20px"
        };
        return (
            <div>
                {/*获取到父组件传递的文字内容*/}
                {this.props.caption}:
                <button onClick={this.onJia} style={btnStyle}>+</button>
                <span>{this.state.counter}</span>
                <button onClick={this.onJian} style={btnStyle}>-</button>
            </div>
        )
    }
}
// 这个propTypes只能在开发阶段辅助检测父向子传递数据的类型及是否必备。
// 在生产环境中，无意义，可使用 babel-react-optimize 去掉propTypes验证。
Counter.propTypes={
    caption:PropTypes.string.isRequired,
    initValue:PropTypes.number
}

// defaultProps 用于设置默认值，当父向子组件未传递时的默认值。
Counter.defaultProps={
    initValue:0
}

---

二、函数数据类型：相当于父组件向子组件传递了一个函数，在子组件内部某一个时刻执行这个函数，就会将子组件的数据传递给父组件中。

---

（1）步骤一：在父组件中定义函数，约定参数。

（2）步骤二：给指定的子组件设置传递的属性

（3）步骤三：在子组件中，确定父组件传递过来的函数 *执行 *的位置，及传入的参数。

• 应用实例：子组件做任意修改，父组件均正常显示总和。
  在父组件中实时显示多个子组件的总和。

修改ControlPanel文件内容如下：

import React ,{Component} from 'react';
import Counter from './Counter';

export default class ControlPanel extends Component{
    constructor(props){
        super(props);
        this.onCounterUpdate=this.onCounterUpdate.bind(this);
        // 每一个ContrlPanel组件类的私有属性
        this.initValues=[0,10,20];
        // 获得初始加和的值，reduce函数获取到加和结果，如果没有默认为0。
        const initSum=this.initValues.reduce((a,b)=>a+b,0);
        this.state={
            sum:initSum
        }
    }
    // 步骤一：在父组件中定义函数，约定参数。

    // 在父组件中定义函数，约定参数一是更新后的值，参数二是原值。
    onCounterUpdate(newValue,previousValue){
        const valueChange=newValue-previousValue;
        // 触发state值的改变，引发重新渲染。
        this.setState({
            sum:this.state.sum+valueChange
        })
    }
    render(){
        return (
            <div>
                {/*步骤二：给指定的子组件设置传递的属性*/}
                {/*通过给子组件设置属性的方式传递定义的函数onCounterUpdate*/}
                <Counter caption="First" initValue={this.initValues[0]} onUpdate={this.onCounterUpdate}></Counter>
                <Counter caption="Second" initValue={this.initValues[1]} onUpdate={this.onCounterUpdate}></Counter>
                <Counter caption="Third" initValue={this.initValues[2]} onUpdate={this.onCounterUpdate}></Counter>
                <hr/>
                {/*展示总和*/}
                <div>Total Count:{this.state.sum}</div>
            </div>
        )
    }
}

修改Counter文件内容如下：

import React,{Component} from 'react';
// 注意：react最新版本已经将proptypes独立出来，需要自行安装prop-types才可以使用。
import PropTypes from 'prop-types';

export default class Counter extends Component{
    constructor(props){
        super(props);
        this.onJia=this.onJia.bind(this);
        this.onJian=this.onJian.bind(this);
        this.state={
            // 使用父组件传递过来的初始值
            counter:props.initValue||0
        }
    }
    onJia(){
        this.updateCount(true);
    }
    onJian(){
        this.updateCount(false);
    }
    // 增加、减少共用此函数
    updateCount(isIncrement){
        const previousValue=this.state.counter;
        const newValue=isIncrement?previousValue+1:previousValue-1;
        this.setState({counter:newValue});
        // 步骤三：在子组件中，确定父组件传递过来的函数执行的位置，及传入的参数。（此案例中，需要在每一次加减按钮操作时，均实时显示出总和，所以写在了公共函数的内部）

        // 在子组件中调用传递过来的函数，实参一是新值，实参二是老值。
        // 一旦调用，就会触发state的更新，从而引发重新渲染。
        this.props.onUpdate(newValue,previousValue);
    }
    render(){
        const btnStyle={
            margin:"0 20px"
        };
        return (
            <div>
                {this.props.caption}:
                <button onClick={this.onJia} style={btnStyle}>+</button>
                <span>{this.state.counter}</span>
                <button onClick={this.onJian} style={btnStyle}>-</button>
            </div>
        )
    }
}

Counter.propTypes={
    caption:PropTypes.string.isRequired,
    initValue:PropTypes.number,
    onUpdate:PropTypes.func
};
Counter.defaultProps={
    initValue:0,
    onUpdate:f=>f
};