react子父传参有几种方法?

react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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>
    )
  }
}

更多react的相关知识,可访问:前端开发学习!!

以上就是react子父传参有几种方法?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读