reactjs - 如何在单击时更改特定组件的状态，在 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;

标签： reactjsreact-hooksuse-state

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;