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

Question

我正在尝试在 React JS 中实现切换功能，因此当用户单击标题时，它的内容/文本应该是可见的。我能够创建切换功能，但是当我单击标题时，将显示所有文本，例如，如果我单击标题 - 文本 1、文本 2、文本 3 和文本 4 也会显示，而不是唯一的文本 1。

这是链接到我的代码沙箱示例

我的代码：

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>
);
}

我想做的是当用户单击标题 1 时，只显示文本 1，而不是所有其他文本。任何建议将不胜感激，

谢谢。

Answer 1

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

然后，您可以根据当前toggled状态有条件地渲染下面的texth1

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>
);
}

我在这里分叉了你的演示。