reactjs - 同一元素的两个实例似乎共享状态

Question

在我的 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 .

Answer 1

您需要确保每个复选框的标签和 ID 相同。这是一个有效的 example

但如果您尝试实现 Accordion 样式，则可能需要另一种方法。