React不使用useRef如何从父组件触发子组件内部的方法

方案1：优化触发器模式（最简实现，适合父子组件层级近的场景） #

你原有的布尔触发器方案可以完全去掉回调参数，改用递增计数器作为触发信号，只需要传递1个prop即可实现需求，没有来回切换状态的冗余逻辑：

// 父组件
const Parent = () => {
  // 用数字计数器代替布尔值，不需要额外回调重置状态
  const [collapseTrigger, setCollapseTrigger] = useState(0)

  return (
    <div>
      <button onClick={() => setCollapseTrigger(prev => prev + 1)} >点击折叠所有文件夹</button>
      <Child collapseTrigger={collapseTrigger} />
    </div>
  )
};

// 子组件
const Child = ({collapseTrigger}) => {
  const collapseAllFolders = () => {
    console.log("所有文件夹已折叠")
    // 你的折叠逻辑写在这里
  }

  // 只要trigger数值变化，就执行折叠逻辑
  useEffect(()=>{
    collapseAllFolders()
  },[collapseTrigger])

  return <div>子组件的文件夹结构</div>
};

方案2：Context封装（适合子组件嵌套层级深的场景） #

如果你的文件夹结构嵌套很深，逐层传递trigger props比较麻烦，可以用Context做跨层级状态共享，不需要给中间层组件传任何参数：

1. 首先封装公共Context

import { createContext, useContext, useState } from 'react';

const CollapseContext = createContext();

export const CollapseProvider = ({ children }) => {
  const [trigger, setTrigger] = useState(0);
  const triggerCollapse = () => setTrigger(prev => prev + 1);
  return (
    <CollapseContext.Provider value={{ trigger, triggerCollapse }}>
      {children}
    </CollapseContext.Provider>
  );
};

export const useCollapseTrigger = () => useContext(CollapseContext);

2. 根组件包裹Provider

const App = () => {
  return (
    <CollapseProvider>
      <Parent />
    </CollapseProvider>
  )
}

3. 父组件直接调用触发方法

const Parent = () => {
  const { triggerCollapse } = useCollapseTrigger();
  return (
    <div>
      <button onClick={triggerCollapse}>点击折叠所有文件夹</button>
      <Child />
    </div>
  )
};

4. 任意层级的子组件监听触发信号

const Child = () => {
  const { trigger } = useCollapseTrigger();
  const collapseAllFolders = () => {
    console.log("所有文件夹已折叠")
  }

  useEffect(()=>{
    collapseAllFolders()
  },[trigger])

  return <div>嵌套的文件夹结构</div>
};

以上两种方案都完全遵循React单向数据流规则，不需要使用useRef，也没有冗余的状态来回传递逻辑。

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