如何在单击时更改特定组件的状态，在 React js 中使用 useState？

Question

我在 React js 中使用类似功能组件时遇到问题。每当我单击此图标时，它都会像这样打开与它相关的每个组件，

但我想要的是只为被点击的组件打开组件。
我怎样才能做到这一点？
我在这里使用 useState 来实现这个功能
并且为每个组件设置不同的状态在这里没有意义。

代码
这是当前功能的一个简单示例

import React, { useState } from "react";


function Test1() {
  const [body, setBody] = useState(false);
  const showHideBody = () => {
    setBody(!body);
  };

  return (
    <div>
      <div>I am header</div>

      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>

      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
      <div>I am footer</div>
    </div>
  );
}

export default Test1;

Answer 1

您应该为组件创建一个单独的组件类型，每个组件都有自己的状态：

import React, { useState } from "react";

function Component() {
  const [body, setBody] = useState(false);
  const showHideBody = () => {
    setBody(!body);
  };

  return (
    <div>
      {body ? <div className="body__container">I am body</div> : null}
      <button onClick={showHideBody}>{body ? "Hide body" : "Show Body"}</button>
    </div>
  );
}

function Test1() {
  return (
    <div>
      <div>I am header</div>

      <Component />
      <Component />
      <Component />
      <Component />
      <Component />
      <Component />

      <div>I am footer</div>
    </div>
  );
}

export default Test1;

如何在单击时更改特定组件的状态，在 React js 中使用 useState？

How to change the state of the particular component when it is clicked, using useState in react js?

reactjs

react-hooks

use-state