初学react之组件传值

一、在使用react的时候，组件传值是一个非常重要的知识点，组件传值一般有父子组件传值、兄弟组件传值（我们常用的），那么接下来上代码。

父组件通过props传值给子组件
//父组件中
<ChildComponent data={[1,2,3]} />

//子组件中
通过props获取父组件传过来的data
console.log(this.props.data);
复制代码

子组件传值给父组件
//子组件通过在props传入一个getData方法，并且把参数data传入在方法中传给父组件
export default class ChildComponent extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子组件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}
复制代码

父组件获取子组件传来的值

//父组件通过props接收一个getData方法来获取子组件的值
import Child from './Child.js'；
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父组件
        <ChildComponent getData={this.getData}/>
      </div>
    )
  }
}
复制代码

兄弟组件传值
//兄弟组件传值，我们一般使用发布订阅模式，当然通过父组件作中转也可以，但是发布订阅模式更好用
import PubSub from 'pubsub-js' //组件中引入这个库

//发布消息-sendMessage是方法名，在订阅的时候用到
PubSub.publish("sendMessage",{'发布消息了',num:20})

//订阅消息-通过订阅sendMessage这个方法来获取数据
componentDidMount(){
	let mySub = PubSub.subscribe("sendMessage",(msg,data)=>{
		console.log(msg,data)
	})
}

复制代码

二、总结
其实组件传值的思想大该都差不多，大家有个印象，以后容易找资料即可，你学废了吗