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

【问题标题】：How to change the state of the particular component when it is clicked, using useState in react js?如何在单击时更改特定组件的状态，使用react js中的useState？
【发布时间】：2021-05-14 01:39:15
【问题描述】：

在 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;

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案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;

【讨论】：

谢谢@tmwilliamlin168 这很简单，但想不出来。谢谢