允许手风琴一次只打开一个

Question

我正在用 React spring 创建手风琴，手风琴准备就绪并且工作正常，但我无法让手风琴一次打开一个项目，现在打开所有同时打开三个项目，我希望只能打开一个。

这是代码和 -> https://codesandbox.io/s/prod-sun-ttix7?file=/src/App.tsx

Answer 1

您只需将打开状态拉入 App 组件，并使用键或索引作为（打开）指示器，如下所示：

应用组件

function App() {
  const [openKey, setOpenKey] = useState()

  const handleToggle = key => {
    setOpenKey(openKey !== key ? key : null)
  }

  return (
    <Container>
      {data &&
        data.map(({ name, content }) => (
          <ServiceItem
            key={name}
            name={name}
            content={content}
            toggle={handleToggle}
            open={openKey === name}
          />
        ))}
    </Container>
  );
}

ServiceItem 组件

const ServiceItem = ({ name, content, toggle, open }: ServiceItemProps): JSX.Element => {
  return (
    <div key={name}>
      <Item onClick={() => toggle(name)}>
        <Text className="text-15 regular laptop:text-20 laptop:regular">
          {name}
        </Text>
        <Icon className="text-15 regular laptop:text-20 laptop:regular">
          {!open ? "+" : "-"}
        </Icon>
      </Item>
      <Expandable open={open}>
        <ContentContainer>
          <React.Fragment key={name}>
            <Value>{content}</Value>
          </React.Fragment>
        </ContentContainer>
      </Expandable>
    </div>
  );
};

这是一个工作示例：https://codesandbox.io/s/infallible-banzai-fnncw。

允许手风琴一次只打开一个

Allow accordion to only open one at a time

reactjs

react-spring

react-resize-observer

resize-observer