如何将一个按钮设置为控制所有手风琴的开关？-PHP中文网问答

我有一个组件，使用以下代码创建一个可折叠的手风琴：

import React, {useState} from 'react';

const Collapsible = (props) =>{
    const [open, setOpen] = useState(false);
    const toggle = () => {
        setOpen(!open);
    }
    return(
        <div>
            <button className={props.level} onClick={toggle}>{props.label}</button>
            {open && (
                <div className="toggle">
                    {props.children}
                </div>
            )}
        </div>
    )
}

export default Collapsible;

我在主应用程序的多个位置使用它，有时在其他手风琴中使用手风琴。在多个实例中，我实际上不知道页面上会有多少手风琴，因为它们是基于数据动态渲染的。考虑到这一点，我想在主应用程序中创建一个按钮，打开（和关闭）所有手风琴，而不需要设置一个固定的数量，并且不需要在主应用程序中渲染所有手风琴（即一些手风琴在其他组件中渲染，然后导入到主应用程序中）。

我尝试使用ref hooks来实现这一点：

在Collapsible组件的按钮中添加ref，并通过props从父组件访问：

<button className={props.level} onClick={toggle} ref={props.innerRef}>{props.label}</button>

在主应用程序中添加以下ref：

const childRef = useRef();
const openClick = () => {
   childRef.state = true;
}

const closeClick = () => {
   childRef.state = false;
}

在主应用程序中使用以下按钮：

<button onClick = {openClick}>
   展开全部
</button>
<button onClick = {closeClick}>
   折叠全部
</button>

在渲染时将ref添加到手风琴中：

<Collapsible label="" level="content" innerRef={childRef}>

这实际上什么都没做，可能是因为我在第2步中尝试访问状态的方式是错误的，但我认为这是值得一试的...

对于是否可行的任何想法吗？