本文旨在解决在 React 中，当使用 _.map 渲染动态数量的组件时，如何通过点击事件来控制特定元素的显示与隐藏。核心思路是利用 useState 来管理每个组件的显示状态，并结合事件处理函数来实现状态的切换，从而达到响应式的显示隐藏效果。这对于构建可配置、动态内容的 UI 界面至关重要。
在 React 中，动态渲染组件时，直接操作 DOM 元素（如使用 document.getElementById）通常不是最佳实践。React 的核心思想是数据驱动视图，应该通过状态 (state) 的改变来触发视图的更新。当组件数量动态变化时，我们需要一种能够针对每个组件独立控制其行为的方法。
以下提供一种使用 useState Hook 来实现点击事件控制元素显示隐藏的方案。
import React, { useState } from 'react';
import _ from "lodash";
const dummyData = {
columnOne: "item one",
columnTwo: "item two",
columnThree: "item three"
};
function TestPage() {
const [visibility, setVisibility] = useState({});
const toggleVisibility = (key) => {
setVisibility(prevVisibility => ({
...prevVisibility,
[key]: !prevVisibility[key]
}));
};
return (
<div>
{_.map(dummyData, (data, key) => (
<div key={key} className="column-container">
<div className="heading">{key}</div>
<div className="show-content-btn" onClick={() => toggleVisibility(key)}>
V
</div>
<div className="content" style={{ display: visibility[key] ? 'block' : 'none' }}>
{data}
</div>
</div>
))}
</div>
);
}
export default TestPage;代码解析：
- useState Hook: const [visibility, setVisibility] = useState({}); 使用 useState 创建一个名为 visibility 的状态变量，初始值是一个空对象。这个对象用于存储每个列的显示状态，键是列的 key，值是布尔值，表示是否显示内容。
-
toggleVisibility 函数: const toggleVisibility = (key) => { ... } 定义了一个 toggleVisibility 函数，该函数接收一个 key 作为参数，用于切换对应列的显示状态。它使用 setVisibility 函数来更新 visibility 状态。
- prevVisibility => ({ ...prevVisibility, [key]: !prevVisibility[key] })：这是一个函数式更新，确保基于先前的状态进行更新。它创建了一个新的对象，该对象包含了先前状态的所有属性，并且将指定 key 的值取反。
- _.map 循环: _.map(dummyData, (data, key) => ( ... )) 使用 _.map 循环遍历 dummyData 对象，为每个键值对渲染一个组件。
- onClick 事件: <div className="show-content-btn" onClick={() => toggleVisibility(key)}>V</div> 在显示/隐藏按钮上绑定 onClick 事件，当点击按钮时，调用 toggleVisibility 函数，并传入当前列的 key。
- 条件渲染: <div className="content" style={{ display: visibility[key] ? 'block' : 'none' }}>{data}</div> 使用内联样式和三元运算符，根据 visibility[key] 的值来决定是否显示内容。如果 visibility[key] 为 true，则显示内容；否则，隐藏内容。
注意事项：
- Key 属性: 在循环渲染组件时，必须为每个组件添加 key 属性，以帮助 React 识别组件的变化。
- 状态管理: useState 是管理组件内部状态的常用方式。对于更复杂的状态管理，可以考虑使用 useReducer 或第三方状态管理库（如 Redux, Zustand 或 MobX）。
- 样式控制: 这里使用内联样式来控制显示/隐藏。也可以使用 CSS 类名和 CSS Modules 来实现更复杂的样式控制。例如，可以添加一个 hidden 类，并使用 className={visibility[key] ? '' : 'hidden'}。
总结：
通过 useState Hook，我们可以为每个动态渲染的组件维护独立的状态，并使用事件处理函数来响应用户的交互。这种方法避免了直接操作 DOM，符合 React 的数据驱动视图的思想，使得代码更加简洁、可维护和易于测试。 该方法适用于需要根据用户交互动态显示和隐藏内容的场景，例如手风琴效果、可折叠面板等。
