React讲解 - 父组件调用子组件内容

前言

本篇文章属于 React通信 > 父子通信 > 父组件调用子组件 的内容。父组件调用子组件的场景：

• 子组件被多个地方使用，需要单独封装
• 子组件逻辑较重，使用完全受控模式成本较高

使用父组件调用子组件进行逻辑调用有以下优势：

• 子组件可以封装，进行复用。并且里面的逻辑不受外界干扰
• 可以把更多相关逻辑封装在子组件里，而不需要传递 props
• 搜集数据简单

正文

Class Component

Hooks

使用到的hooks：useImperativeHandle 和 useRef

/* child子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {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>
    )
}

/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法
        childRef.current.changeVal(99);
    }
    ...
    return (
        <>
            {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
            <ChildComp  cRef={childRef} />
            <button onClick={updateChildState}>触发子组件方法</button>
        </>
    )
}
　　

方法二、参考react官方文档：

import {useState, useImperativeHandle,forwardRef} from 'react';
// props子组件中需要接受ref
let ChildComp = (props,ref) => {
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(ref, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
           
        }
    }));
    return (
        <div>{val}</div>
    )
}
ChildComp = forwardRef(ChildComp)

/* FComp 父组件 */
import {useRef} from 'react';
const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法
        childRef.current.changeVal(99);
    }
    return (
        <>
            <ChildComp ref={childRef} />
            <button onClick={updateChildState}>触发子组件方法</button>
        </>
    )
}

总结

demo: https://codepen.io/collection...总结：

• 都可以实现父组件调用子组件方法
• 无论是 props ref 还是 forwardRef 都是为了向子组件传递 ref
• 实现需要一个 ref 对象 (为什么是ref？ 特性是？) 【其实只要是传递一个对象就可以，ref 应该是和组件生命周期有关系】
• Cannot read property 'getList' of undefined ( null in ref)
• 实现需要 useImperativeHandle 起到绑定方法到对象上的作用
• 给ref.current赋值是个副作用，所以一般在Did函数或者事件处理函数里给ref.current赋值；
• 组件在卸载时要清理ref.current的值。本质上useImperativeHandle就是在帮我们做这些事情。

todo:

• 受控通信方式简单介绍