react 父子组件之间相互传值

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

1、定义父组件

import React, { PureComponent } from 'react';

export default class Father extends PureComponent {
  
  render(){

    return(
      <div>
        <p>父组件</p>
        
      </div>
    )
  }
}

2、定义子组件

import React, { PureComponent } from 'react';

export default class Children extends PureComponent {
  
  render(){

    return(
      <div>
        <p>子组件</p>
        
      </div>
    )
  }
}

3、父组件向子组件传值

import React, { PureComponent } from 'react';
// 引入子组件
import Children from '@/components/Children';


export default class Father extends PureComponent {
  
  render(){

    // 传给子组件 的数据
    const data= {
     
      lt: '520',
    };

    return(
      <div>
        <p>父组件</p>

         <Children  data={ data } />
        
      </div>
    )
  }
}

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

import React, { PureComponent } from 'react';

export default class Children extends PureComponent {

 constructor(props) {
    super(props);
    this.state = {
    
  }
  
  render(){

    return(
      <div>
        <p>子组件</p>
        // 获取父组件的值
        <p>{ this.props.data.lt }</p>
        
      </div>
    )
  }
}

 4、子组件向父组件传值

import React, { PureComponent } from 'react';

export default class Children extends PureComponent {


// 选中对应节点，选出符合条件的值
  onSelect = () => {
    // 向父组件传值
    const lzp= {
      name: lut,
      code: '1314',
     
    };
    this.props.handleData(lzp);
  };
  
  render(){

    return(
      <div>
        <p>子组件</p>
        <Button onClick={this.onSelect}> 向父组件传值 </Button>
        
      </div>
    )
  }
}

import React, { PureComponent } from 'react';
// 引入子组件
import Children from '@/components/Children';


export default class Father extends PureComponent {

handleData = (a) => {
    // 获取子组件传来的值a
    console.log(a);  // lzp= {name: lut,code: '1314'}

  };
  
  render(){

    return(
      <div>
        <p>父组件</p>

         <Children  handleData={this.handleData} />
        
      </div>
    )
  }
}