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

Posted 2023-03-21

【中文标题】使按钮在 React 中以手风琴形式向上滑动

【英文标题】：Make buttons slide up in accordion in React

【发布时间】：2021-08-22 06:34:55

【问题描述】：

我在 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>  
    );

【问题讨论】：

您能否更新您的问题以在Minimal, Complete, and Reproducible Code Example 中包含所有这些组件的实现细节？

将状态移至父级：codesandbox.io/s/billowing-resonance-dri8d?file=/src/…

@Branislav 但这需要为每组 SlideButtons 制作一个组件。我不想那样做

【参考方案1】：

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

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