【React Hook】之useImerpativeHandler

作用：将函数内的方法返回给ref绑定的组件

类组件写法：利用ref, 在父组件中调用子组件事件

这个Hook的第三个参数是一个[], 这个[]中的数据决定了这个Hook会再次执行

Hello.js

import React, {Component} from 'react'

export default class Hello extends Component {
    handler = () => {
        alert('Hello world')
    }

    render() {
        return (
            <div>Hello</div>
        )
    }
}

App.js

import Hello from "./components/Hello";
import React from "react";

export default class App extends React.Component {
    fn= () => {
        this.hello.handler()
    }
    render() {
        return (
            <div>
                <button type = "primary" onClick = {this.fn}>click</button>
                <Hello ref = {el => this.hello = el}></Hello>
            </div>
        )
    }
}

函数组件写法：

利用useImperativeHandler

Hello.js

import React, {Component, forwardRef,useState, useImperativeHandle} from 'react'

export default forwardRef(function Hello(props, ref) {
  const [n, setN] = useState(0)
  // 定义方法
  useImperativeHandle(ref, () => {
      // 这里定义让父组件执行的方法
      return {
          add() {
              setN(n=> n + 1)
          }
      }
  }, []) // 第三个参数, n的改变会影响回调函数的执行
  return (
      <div>Hello内部的{n}</div>
  )
})

 App.js

import Hello from "./components/Hello";
import React, {useRef} from "react";

export default function App() {
    const hello = useRef(null)
    const handler = () => {
        // 拿到hello内部的方法
        console.log("hello", hello)
        hello.current.add()
    }
    return (
        <div>
            <button onClick = {handler}>触发hello组件中的方法</button>
            <Hello ref = {hello}/>
        </div>
    )
}