React使用Ref方式进行父子组件传值和调用

一、React.createRef()、useImperativeHandle、forwardRef；父class，子function

1. 目的：使用hook和component进行ref方式父子组件传值和调用方法
2. 涉及：React.createRef()、useImperativeHandle、forwardRef
3. 方式：父组件是类组件，子组件是函数组件

父组件--类组件

export default class Parent extends React.Component {
constructor(props) {
  super(props)
  this.report = React.createRef();
  this.state = {}
}

render() {
    return (
      <>
        <div id="btn"
            onClick={()=>this.report.current.report(msg)}>
        </div>
        <Child  ref={this.report}/>
      </>
      )
}

子组件--函数组件

import React, {useImperativeHandle,forwardRef} from 'react';

const Child = ({},ref) => {
    useImperativeHandle(ref, () => ({
      report: (id) => {
        ...
      }
    }));

    return (
      <>
         ...
      </>
   )
}
export default forwardRef(Child);

二、useImperativeHandle、forwardRef、useRef()；父function，子function

1. 目的：使用hook和component进行ref方式父子组件传值和调用方法
2. 涉及：React.createRef()、useImperativeHandle、forwardRef
3. 方式：父组件是函数组件，子组件是函数组件

父组件--函数组件

const Parent=()=>{
    const report = useRef();
    return (
      <>
         <div onClick={()=>{report.current.report(msg)}> //相比class少了this
         </div>
         <Child  ref={report}/>
      </>
   )
}
export default Parent;

子组件--函数组件

import React, {useImperativeHandle,forwardRef} from 'react';

const Child = ({},ref) => {
    useImperativeHandle(ref, () => ({
      report: (id) => {
        ...
      }
    }));

    return (
      <>
         ...
      </>
   )
}
export default forwardRef(Child);

三、React.createRef、useImperativeHandle、forwardRef、useRef()；父class，子class

1. 目的：使用hook和component进行ref方式父子组件传值和调用方法
2. 涉及：React.createRef()、useImperativeHandle、forwardRef
3. 方式：父组件是类组件，子组件是类组件

父组件--类组件

export default class Parent extends React.Component {
constructor(props) {
  super(props)
  this.report = React.createRef();
  this.state = {}
}

render() {
    return (
      <>
        <div id="btn"
            onClick={()=>this.report.current.doReport(msg)}>
        </div>
        <Child  ref={this.report}/>
      </>
      )
}

子组件--类组件

export default class Child extends React.Component {
constructor(props) {
  super(props)
  this.state = {}
}

doReport = (msg) => {
  ... // 在这里定义方法
}


render() {
    return (
      <>
        ...
      </>
      )
}