使按钮在 React 中以手风琴形式向上滑动

Question

我在 React 中有一个带有可以向上/向下滑动内容的按钮的手风琴，例如 image

我做了一些功能组件和东西看起来像这样：

<SlideButtonContainer>
    <SlideButton title="Title goes here">
        Content goes here
    </SlideButton>
    <SlideButton title="Title goes here">
        Content goes here
    </SlideButton>
</SlideButtonContainer>

单击SlideButton 会调用函数handleClick，该函数会更改组件的状态opened，使其内容在false 上向上滑动或在true 上向下滑动。

但是我怎样才能让SlideButtonContainer 中的所有其他SlideButtons 将它们的状态opened 设置为false？

SlideButton使用SlideDown from this repo，如下：

export default function SlideButton(props) {
    const [opened, setOpened] = useState(false);

    function handleClick() {
        setOpened(!opened);
    }

    return (
        <div className="slideButton">
            <div className="slideButtonButton" onClick={handleClick}>
                <div>
                    {props.title}
                </div>
            </div>
            <div className="slideButtonContents">
                <SlideDown>
                    {opened ? props.children : null}
                </SlideDown>
            </div>
        </div>
    );
}

SlideButtonContainer 只是一个样式化的 div

export default function SlideButtonContainer(props) {
    return (
        <div className="slideButtonContainer">
            { props.children }
        </div>  
    );
}

Answer 1

解决了。 在 SlideButtonContainer 中，我在 render 上使用 React.cloneElement 并将 refs 设置为它的孩子，我可以在这个循环中使用孩子的函数：

for (var ref in this.refs) {
    this.refs[ref].slideUp();
}