React父子组件传值

父组件传值给子组件/父组件调用子组件方法

父组件：

import React from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ChildrenOrder from "./components/ChildrenOrder";//引入子组件
class Process extends React.Component {

  constructor(props) {
    super(props);
    this.state = {number: 123}
  }

  componentDidMount() {
    console.log(this.child,"this.child")
    this.child.state.childHead="555" //父组件可以改变子组件state里面的值
    this.child.handleThisIsChild();//父组件调用子组件方法
  }

  render() {
    return (
      <PageHeaderWrapper>
        <div>父组件</div>
        <ChildrenOrder
          number={this.state.number} //父组件给子组件传值
          onRef={(child) => {//绑定子组件this指向给父组件
            this.child = child
          }}/>
      </PageHeaderWrapper>
    );
  }
}

export default Process

子组件:

import React from 'react';

class ChildrenOrder extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      childHead:"handsome"
    }
  }

  componentDidMount() {
    this.props.onRef(this)//绑定this
  }

  handleThisIsChild(){
    //this.props.number对于子组件只是可读，不能改变
    console.log("这里是孩子地盘父组件的state值："+this.props.number)
  }

  render() {
    return (
      <div >
       子组件
      </div>
    )
  }
}

export default ChildrenOrder;

父组件传值给子组件，子组件对于父组件state里面的值不能进行更改
父组件调用子组件方法，父组件可以更改子组件state里面的值