React父组件如何触发子组件内部定义的clearFilters方法

核心通过React的forwardRef+useImperativeHandle实现，无需将父组件定义的函数传递给子组件或按钮，仅需要子组件主动对外暴露内部的clearFilters方法，父组件通过引用调用即可。

步骤1：改造所有子组件，对外暴露重置方法 #

用forwardRef包裹子组件，再通过useImperativeHandle把内部的clearFilters方法暴露给持有该组件引用的父组件，子组件内部的状态逻辑、重置逻辑完全不需要修改：

import { useState, forwardRef, useImperativeHandle } from 'react';

// 以Type组件为例，Age、Color组件改造逻辑完全一致
const Type = forwardRef((props, ref) => {
  const initialState = {
    cat: false,
    dog: false,
    parrot: false,
    hamster: false,
  }
  const [type, setType] = useState(initialState);

  const clearFilters = () => {
    setType(initialState);
  }

  // 对外暴露方法
  useImperativeHandle(ref, () => ({
    clearFilters
  }));

  // 原有组件的渲染逻辑保持不变
  return <div>{/* 原Type组件的UI内容 */}</div>
});

步骤2：改造Container父组件，调用子组件暴露的方法 #

父组件创建引用挂载到子组件上，点击按钮时直接调用引用上挂载的clearFilters方法即可：

import { useState, useRef } from 'react';

const Container = ({children}) => {
  const [value, setValue] = useState([]);
  // 创建子组件引用
  const childRef = useRef(null);

  const handleClear = () => {
    // 调用子组件的重置方法，加可选链避免初始化时报错
    childRef.current?.clearFilters();
  }

  return(
  <>
    {/* 把引用和原有callback一起传递给子组件 */}
    {React.cloneElement(children,{ callback: setValue, ref: childRef })}
    <Button onClick={handleClear}>Clear all</Button>
  </>
  )
}

原有组件的使用方式不需要做任何修改，仍然可以直接用<Container><Type/></Container>的形式调用，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Alyona