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

Question

我在 React 中有一个带有滑动按钮的手风琴 up/down 内容，就像这个 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();
}

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

Make buttons slide up in accordion in React

javascript

accordion

slide

reactjs