ReactHooks中父组件中调用子组件方法

React1 个月前0104

在开发过程中,很多时候需要用到父组件中调用子组件方法,即子组件中暴露一个或多个函数供父组件调用,实时的去对子组件的值进行更新,这里记录下ReactHooks中的实现方式。

一、编写子组件

使用到的hooks -- useImperativeHandle

// react官方文档: https://reactjs.org/docs/hooks-reference.html#useimperativehandle
/* 子组件 */
import React, { useState, useImperativeHandle } from 'react';

// props子组件中需要接受ref
const ChildComp = ({cRef}) => {
    const [val, setVal] = useState();
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(cRef, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
          setVal(newVal);
        }
      }));

      return (
        <div>{val}</div>
    )
}

export default ChildComp

二、编写父组件

使用到的hooks -- useRef

/* 父组件 */
import React, { useRef } from 'react';
import ChildComp from './ChildComp';

const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法
        childRef.current.changeVal(99);
    }

    return (
        <>
            {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
            <ChildComp ref={childRef} cRef={childRef} />
            <button onClick={updateChildState}>触发子组件方法</button>
        </>
    )
}

export default FComp
0 条评论

暂无评论