前言
本篇文章属于 React通信 > 父子通信 > 父组件调用子组件 的内容。
父组件调用子组件的场景：
- 子组件被多个地方使用，需要单独封装
- 子组件逻辑较重，使用完全受控模式成本较高
- 子组件可以封装，进行复用。并且里面的逻辑不受外界干扰
- 可以把更多相关逻辑封装在子组件里，而不需要传递 props
- 搜集数据简单
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 (
{val}
)
}/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
}
...
return (
<>
{/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
方法二、参考react官方文档：
import {useState, useImperativeHandle,forwardRef} from 'react';
// props子组件中需要接受ref
let ChildComp = (props,ref) => {
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
changeVal: (newVal) => {}
}));
return (
{val}
)
}
ChildComp = forwardRef(ChildComp)/* FComp 父组件 */
import {useRef} from 'react';
const FComp = () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
}
return (
<>
总结 【React讲解 - 父组件调用子组件内容【更新中】】todo:
- ref vs fowardRef
- 受控与非受控
推荐阅读
- react 学习总结（一）
- react 的setState是同步还是异步的（）
- react--项目开发|react 项目--博客系统（后端总结）
- 如何升级到 React 18
- 使用react做一个页面滚动的效果
- react.js|props基本使用React
- react|react中this指向的问题
- 计网|WebSocket JS
- react|React hook useEffect 与 计时器 setInterval