react组件通信解析: 1. 父子组件传值 2.父子组件方法互相调用

1.父组件向子组件传值

parent.jsx

import React from 'react';
 // 引入子组件
import Child from './child';
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryInfo: {
        a: 1,
        b: 1
      }
    }
  }
  render() {
  // 定义data向子组件传递对象queryInfo
    return (
        <div id="parent"  className="h-100">
          <Child data={this.state.queryInfo}></Child>
        </div>
    )
  }
}
export default Parent;

child.jsx

import React from 'react';
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: '我是子组件的data'
    }
  }
  render() {
    // 定义data变量来接受父组件传递过来的数据
    const {data} = this.props;
    return (
        <div id="child"  className="h-100">
           <span>我是来自父组件传递的数据{JSON.stringify(data)}</span>
        </div>
)
}
}

export default Child;

2.子组件向父组件传值

parent.jsx

import React from 'react';
 // 引入子组件
import Child from './child';
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryInfo: {
        a: 1,
        b: 1
      }
    }
  }
    // 定义一方法来接受来自子组件的值，val参数为传递过来的值
  handleData = (val) => {
    this.setState({
      reChildData: val
    })
  };
  
  render() {
  // 定义方法handleData 
    return (
        <div id="parent"  className="h-100">
          <Child handleData = {this.handleData}></Child>
        </div>
    )
  }
}
export default Parent;

child.jsx

import React from 'react';
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: '我是子组件的data'
    }
  }
    //定义一方法, 子组件向父组件传递,使用props传递子组件的值
  handleDatas = () => {
    this.props.handleData(this.state.childData);
  }
  
  render() {
    // 定义data变量来接受父组件传递过来的数据
    const {data} = this.props;
    return (
        <div id="child"  className="h-100">
          <button onClick = {this.handleDatas}>我要传值给父组件</button>
        </div>
)
}
}

export default Child;

3.父组件调用子组件的方法

parent.jsx

import React from 'react';
 // 引入子组件
import Child from './child';
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryInfo: {
        a: 1,
        b: 1
      }
    }
  }
   // 这里需要绑定子组件
  bindRef = (ref) => {
    // this.child即为子组件
    this.child = ref;
    // 这里打印 this.child 可获取组组件的所有方法，如此，君想调用那个方法就调那个方法了
    console.log(this.child);
    console.log(this.child.childsMethod())
  };
  // 调用子组件的方法'
  useChildMethod = () => {
    this.child.childsMethod();
  };
 
  render() {
  // 定义方法handleData 
    return (
        <div id="parent"  className="h-100">
     	 <button onClick={this.useChildMethod}>调用子组件的方法</button>
       	  <Child bindRef={this.bindRef}></Child>
        </div>
    )
  }
}
export default Parent;

child.jsx

import React from 'react';
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: '我是子组件的data'
    }
  }
  // 在组件渲染生命周期
  componentDidMount () {
    // 这里是render后将子组件的this传递给父组件
    this.props.bindRef(this);
  }
    childsMethod = () => {
    console.log('这是我子组件的方法');
  };
  render() {
    // 定义data变量来接受父组件传递过来的数据
    const {data} = this.props;
    return (
        <div id="child"  className="h-100">
        </div>
)
}
}

export default Child;

4.子组件使用父組件的方法

parent.jsx

import React from 'react';
 // 引入子组件
import Child from './child';
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryInfo: {
        a: 1,
        b: 1
      }
    }
  }
  // 定义方法
  parentMethod = () => {
    console.log('这是父组件的方法');
  };
 
  render() {
  // 传递方法handleData给子组件 
    return (
        <div id="parent"  className="h-100">
       	  <Child method={this.parentMethod}></Child>
        </div>
    )
  }
}
export default Parent;   

child.jsx

import React from 'react';
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: '我是子组件的data'
    }
  }
  useParentMethod = () => {
   this.props.method()
  };
  
  render() {
    // 两种方式使用度组件方法，直接从props中取method方法，另一种定义自己的方法，再从props中调用
    const {method} = this.props;
    return (
        <div id="child"  className="h-100">
           <button onClick={this.props.method}>我是子组件,我要使用父组件的方法</button>
          <button onClick={this.useParentMethod}>我是子组件,我要使用父组件的方法</button>
        </div>
)
}
}

export default Child;