react--组件间的传值

一、父组件向子组件传值

父组件通过属性进行传递，子组件通过props获取

//父组件中
<Child data={[1,2,3]} />
//子组件中
console.log(this.props.data);

二、子组件向父组件传值

通过回调进行传递数据
父组件通过props向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；

//父组件
import Child from './Child.js'；
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父组件
        <Child getData={this.getData}/>
      </div>
    )
  }
}

//子组件
export default class Child extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子组件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}

三、兄弟组件之间的传值

通过相同的父组件进行传递数据

子组件A通过回调函数形式将数据传给父组件，接着父组件通过属性将数据传递给子组件B

使用context进行传递（待编辑。。。）