时间戳

首页 > 解决方案 > 使按钮在 React 中以手风琴形式向上滑动

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

问题描述

我在 React 中有一个带有向上/向下滑动内容的按钮的手风琴，就像这张图片一样

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

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

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

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

SlideButton使用此 repo 中的 SlideDown，如下所示：

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>  
    );
}

标签： javascriptreactjsaccordionslide

解决方案

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

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

推荐阅读