React组件的传值

一.state和props

这里首先说一下概念，props一般属于父组件，然后getDefaultProps是设置默认props，如果父组件没有给某个prop那就用默认的，getInitialState是设置组件mount以后的初始state的。
state属于组件内部属性，是会频繁修改的，每次state值的改变都会导致components从 当前状态进入update阶段,从而重新render，当子组件继承了父组件 自然就继承了父组件里面所有方法。

·prop用于定义外部接口，state用于记录内部状态；
·prop的赋值在外部世界使用组件时，state的赋值在组件内部；
·组件不应该改变prop的值，而state存在的目的就是让组件来改变的。

二. 组件传值和读值

class Details extends React.Component {
    constructor(props) {
        super(props);
        this.Sort=this.Sort.bind(this)
        this.state = {
            value: props.initValue || 0
        }
}

• 外部传内部

父组件传给子组件用props传值，子组件通过访问props可以读到父组件传进来的值；读取prop值，需要在子组件的构造函数里面第一行通过`super调用父类的构造函数（React.Component），只有这样组件被构造后，类实例的所有成员函数才可以通过this.props访问父组件传递过来的props值。主要是在构造函数中通过参数props获得传入的prop值，并且在构造函数中可以进行this执行环境的绑定。

//子组件在父组件中使用，传入props值，data和typename
<Tagconnect data={result} typename="log_type"/>
//子组件中接收这个props值
class Tagconnect extends React.Component{

    render(){
        return(
            this.props.data===undefined?<div>无数据</div>: <div className={this.props.typename}>有数据</div>
        )
    }
}

• 内部传外部

子组件传值给父组件，依然是通过prop，将函数赋予prop，此时相当于父组件给予子组件一个回调函数，子组件调用函数可以把内部信息传递给外部

//这里是子组件的定义 通过handleSearch函数内调用this.props.callback(value)函数将value这个值传给外部callback函数，外部有对应的回调函数
//可以接受到这个值
class NormalLoginForm extends React.Component{
    handleSearch=(value)=> {
        if(value===""){
            return
        }
        this.props.callback(value);//调用外部回调函数
    };
    render(){
        return (
            <Search
                placeholder="一键搜"
                onSearch={value=>this.handleSearch(value)}
            />
        )
    }
}

<ImeiForm callback={this.searchImei.bind(this,Config.homepageIMEISearch)}/>//这里是子组件在父组件中的使用
//这里是父组件中的回调函数
searchImei=(config,value)=>{
     console.log(value)//得到子组件中的value值
}