前言

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

  • 子组件被多个中央应用，须要独自封装
  • 子组件逻辑较重，应用齐全受控模式老本较高

应用父组件调用子组件进行逻辑调用有以下劣势：

  • 子组件能够封装，进行复用。并且外面的逻辑不受外界烦扰
  • 能够把更多相干逻辑封装在子组件里，而不须要传递 props
  • 收集数据简略

注释

Class Component

Hooks

应用到的hooks：useImperativeHandle 和 useRef

/* child子组件 */// https://reactjs.org/docs/hooks-reference.html#useimperativehandleimport {useState, useImperativeHandle} from 'react';...// props子组件中须要承受refconst 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子组件中须要承受reflet 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>        </>    )}

总结

todo:

  • ref vs fowardRef
  • 受控与非受控