如何对多个元素使用 useState 反应钩子？

Question

我正在使用 mern（mongo express reactjs 和 nodejs）构建一个全栈网站，这是第一次使用 react 钩子。 所以我有一个带有折叠按钮的引导卡来隐藏卡片正文，但我有 6 张卡片，折叠按钮与 useState 挂钩一起使用，onClick 将 expand 属性设置为 false，反之亦然。 我的问题是我应该为 6 张卡使用 6 个 useState 钩子吗？ 或者无论如何，有一些解决方案。 附： 如果所有卡片都使用相同的钩子，那么 onClick 将展开所有卡片。

这是我的一个 useState 和一张卡片的代码：

const [open1, setOpen1] = useState(false);
 <Button

        onClick={() => setOpen1(!open1)}
        aria-controls="example-collapse-text"
        aria-expanded={open1}
      >
        click
      </Button>
      <Collapse in={open1}>
        <div id="example-collapse-text">
        This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </div>
      </Collapse>

Answer 1

好吧，这是通过为卡片制作一个组件然后将其用作 jsx 元素来解决的。

export default function DepartmentCard() {
const [open, setOpen] = useState(false);

<Button
onClick={() => setOpen(open)}
aria-controls="example-collapse-text"
aria-expanded={(open === 1)? true : false}>
click
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
This is a longer card with supporting text below as a natural
    lead-in to additional content. This content is a little bit longer.
</div>
</Collapse>
}

顺便说一句，这是相同的代码，但我没有使用它 6 次，而是将其作为一个组件制作，并使用了 6 次组件标签。 但不同的是现在每个组件都有自己的状态

例子：

ReactDOM.render(
<div>
<DepartmentCard/>
<DepartmentCard/>
<DepartmentCard/>
<DepartmentCard/>
<DepartmentCard/>
<DepartmentCard/>
</div>

或者您可以简单地使用 map() 函数或循环来渲染 6 张卡片。 并且你可以使用道具来改变每张卡片的身体。

Answer 2

你可以试试下面的逻辑吗？

const [open, setOpen] = useState(1);
<Button
onClick={() => setOpen(1)}
aria-controls="example-collapse-text"
aria-expanded={(open === 1)? true : false}>
click
</Button>
<Collapse in={(open === 1)? true : false}>
<div id="example-collapse-text">
This is a longer card with supporting text below as a natural
    lead-in to additional content. This content is a little bit longer.
</div>
</Collapse>

<Button
  onClick={() => setOpen(2)}
  aria-controls="example-collapse-text"
  aria-expanded={(open === 2)? true : false}>
  click
</Button>
<Collapse in={(open === 2)? true : false}>
  <div id="example-collapse-text">
  This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
  </div>
</Collapse>

Answer 3

您需要做的是，创建一个名为 component 的文件夹（名称不一定相同，但这非常遵循）。 在那个文件夹中让你像这样卡组件

import React, { useState } from "react";

const card = ({ prop1, prop2 }) => {
  const [isOpen, setOpen] = useState(false);

  const collapseListener = () => {
    setOpen((prvState) => !prvState);
  };

  return (
    <div>
      <button onClick={collapseListener}>{/* button to collapse */}</button>
      <collable collapse={isOpen}>
        {/* your collapasble component */}
        <h1>{prop1}</h1>
        <h1>{prop2}</h1>
      </collable>
    </div>
  );
};

export default card;

然后你可以从任何地方导入这个卡片组件并可以像这样使用它

<Card prop1={'first'} prop2={'second'}  />