如何在 React JS 中切换单个元素的内容？

Question

我正在尝试在 React JS 中实现切换功能，因此当用户单击标题时，它的 content/text 应该是可见的。我能够创建切换功能，但是当我单击标题时会显示所有文本，例如，如果我单击标题 1 - 还会显示 Text1、Text2、Text3 和 Text4，而不是仅显示 Text1。

this is link to my codesandbox example

我的代码：

 import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    id: "services",
    key: "1",
    title: "Title1",
    text: "Text1."
  },
  {
    id: "services",
    key: "2",
    title: "Title2",
    text: "Text2."
  },
  {
    id: "services",
    key: "3",
    title: "Title3",
    text: "Text3."
  },
  {
    id: "services",
    key: "4",
    title: "Title4",
    text: "Text4"
  }
];

export default function App() {
  const [toggled, toggle] = useState(true);
  return (
    <div className="App">
      {data.map(({ title, text }) => {
        return (
          <>
            <h1 onClick={() => toggle(toggled => !toggled)}>{title} </h1>
            {!toggled ? (
              <>
                <p>{text}</p>
              </>
            ) : null}
          </>
        );
      })}
    </div>
  );
}

我想做的是当用户点击 Title1 时，只有 Text1 出现，而不是所有其他文本。非常感谢任何建议，

谢谢。

Answer 1

不是将 true/false 的布尔值存储在组件的 toggled 状态中，而是可以从 data 数组中存储 key相反。

然后，可以根据当前toggled状态

有条件地渲染h1下面的text

export default function App() {
  const [toggled, toggle] = useState("");
  return (
    <div className="App">
      {data.map(({ title, text, key }) => {
        return (
          <>
            <h1 onClick={() => toggle(key)}>{title} </h1>
            {toggled ===key ? (
              <>
                <p>{text}</p>
              </>
            ) : null}
          </>
        );
      })}
    </div>
  );
}

我已经分叉了你的演示 here。

如何在 React JS 中切换单个元素的内容？

How to toggle a content of the single element in React JS?

json

toggle

reactjs

react-hooks