React父组件如何向子Accordion发指令修改其内部open状态

这里提供两种常用的实现方式，可根据业务场景选择：

方案1：状态提升（React官方推荐） #

遵循React单向数据流设计，将所有折叠面板的展开状态上移到父组件统一维护，可避免组件间状态不同步问题，可维护性更高。

修改后父组件代码 #

import { useState } from 'react';

const Parent = ({list}) => {
  // 假设每个item存在唯一id字段，用Set存储当前展开的面板id
  const [openIds, setOpenIds] = useState(new Set());

  const closeAll = () => {
    // 清空展开id集合即可实现全部关闭
    setOpenIds(new Set());
  }

  // 切换单个面板的展开状态
  const toggleAccordion = (id) => {
    setOpenIds(prev => {
      const newSet = new Set(prev);
      newSet.has(id) ? newSet.delete(id) : newSet.add(id);
      return newSet;
    })
  }

  return (
      <>
        <button onClick={closeAll}>Close All</button>
        {list.map(item => 
          <Accordion 
            key={item.id}
            item={item}
            open={openIds.has(item.id)}
            onToggle={() => toggleAccordion(item.id)}
          />
        )}
      </>
  )
}

修改后子组件代码 #

const Accordion = ({item, open, onToggle}) => {
  return (
      <div onClick={onToggle}>
          <p>{item.name}</p>
          {open && <p>{item.detail}</p>}
      </div>   
  )
}

方案2：useImperativeHandle + ref集合 #

适合不想改动现有子组件内部状态逻辑的场景，改造成本更低，通过父组件主动调用子组件暴露的方法实现需求。

修改后父组件代码 #

import { useRef } from 'react';

const Parent = ({list}) => {
  // 存储所有子折叠面板的ref实例
  const accordionRefs = useRef([]);

  const closeAll = () => {
    // 遍历所有ref调用子组件暴露的close方法
    accordionRefs.current.forEach(ref => ref?.close());
  }

  return (
      <>
        <button onClick={closeAll}>Close All</button>
        {list.map((item, index) => 
          <Accordion 
            key={item.id}
            item={item}
            ref={el => accordionRefs.current[index] = el}
          />
        )}
      </>
  )
}

修改后子组件代码 #

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

// 用forwardRef接收父组件传递的ref
const Accordion = forwardRef(({item}, ref) => {
  const [open, setOpen] = useState(false);

  // 向父组件暴露可调用的方法
  useImperativeHandle(ref, () => ({
    close: () => setOpen(false)
  }))

  return (
      <div onClick={() => setOpen(o => !o)}>
          <p>{item.name}</p>
          {open && <p>{item.detail}</p>}
      </div>   
  )
})

内容的提问来源于stack exchange，提问作者Alp Özaslan