在我的 React
应用程序中,我有一个不止一次使用的 Collapsible
组件,如下所示:
const [openFAQ, setOpenFAQ] = React.useState("");
const handleFAQClick = (question: string) => {
if (question === openFAQ) {
setOpenFAQ("");
} else {
setOpenFAQ(question);
}
};
return ({
FAQS.map(({ question, answer }, index) => (
<Collapsible
key={index}
title={question}
open={openFAQ === question}
onClick={() => handleFAQClick(question)}
>
{answer}
</Collapsible>
))
})
并且 Collapsible
元素接受 open
作为 Prop 并且没有自己的状态:
export const Collapsible = ({
title,
open,
children,
onClick,
...props
}: Props) => {
return (
<Container {...props}>
<Toggle open={open} />
<Title onClick={onClick}>{title}</Title>
<Content>
<InnerContent>{children}</InnerContent>
</Content>
</Container>
);
};
但是,当我单击第二个 Collapsible
时,第一个打开...我不明白为什么。
沙箱中提供了一个工作示例 here .
最佳答案
您需要确保每个复选框的标签和 ID 相同。这是一个有效的 example
但如果您尝试实现 Accordion 样式,则可能需要另一种方法。
关于reactjs - 同一元素的两个实例似乎共享状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68938923/