本文旨在解决如何使用 React 和 Lodash，在动态生成的 HTML 元素中，实现点击事件来切换特定元素的显示和隐藏状态。通过使用 useState 管理类名，并结合 onClick 事件动态修改状态，可以有效地控制元素的可见性，适用于从数据库动态获取数据并渲染的场景。
在 React 中，当需要动态渲染组件，并且希望对每个组件的特定元素进行操作（例如，点击按钮显示/隐藏内容）时，直接使用 document.getElementById 通常不可行，因为动态生成的元素可能具有相同的类名。 本文将介绍一种使用 useState Hook 管理类名，并通过 onClick 事件动态切换状态的方法，来实现这一目标。
使用 useState 管理类名
首先，我们需要使用 useState Hook 来存储和更新要操作的元素的类名。 这允许我们根据组件的状态来动态地改变元素的样式。
import React, { useState } from 'react';
import _ from "lodash";
const dummyData = {
columnOne: "item one",
columnTwo: "item two",
columnThree: "item three"
};
function TestPage() {
const [visibleColumns, setVisibleColumns] = useState({});
const toggleContent = (key) => {
setVisibleColumns(prevState => ({
...prevState,
[key]: !prevState[key]
}));
};
return (
_.map(dummyData, (data, key) => {
return (
<div key={key}>
<div className="column-container">
<p className="heading">{key}</p>
<div
className="show-content-btn"
onClick={() => toggleContent(key)}
style={{ cursor: 'pointer' }}
>
V
</div>
</div>
<p
className="content"
style={{ display: visibleColumns[key] ? 'block' : 'none' }}
>
{data}
</p>
</div>
);
})
);
}
export default TestPage;在上面的代码中：
立即学习“前端免费学习笔记（深入）”；
- useState({}) 初始化一个空对象 visibleColumns，用于存储每个 column 的可见性状态。Key 是 column 的名字， value 是一个 boolean， 代表是否显示。
- toggleContent(key) 函数用于切换特定 column 的可见性状态。 它接受一个 key 参数，表示要切换的 column 的 key。
- onClick={() => toggleContent(key)} 将 toggleContent 函数绑定到按钮的 onClick 事件。 当按钮被点击时，toggleContent 函数会被调用，并传入相应的 key。
- style={{ display: visibleColumns[key] ? 'block' : 'none' }} 根据 visibleColumns[key] 的值动态设置 <p> 元素的 display 属性。如果 visibleColumns[key] 为 true，则显示内容；否则，隐藏内容。
注意事项
- Key 属性: 在 _.map 中，为每个生成的组件添加唯一的 key 属性，可以帮助 React 更好地追踪组件的变化，提高渲染性能。
- 状态管理: useState Hook 是管理组件状态的常用方法。 在复杂的应用中，可以考虑使用 Redux 或 Context API 等更高级的状态管理方案。
- 样式控制: 可以使用 CSS 类名来控制元素的样式，而不是直接使用内联样式。 这可以提高代码的可维护性和可读性。
总结
通过使用 useState Hook 和 onClick 事件，我们可以轻松地实现动态显示/隐藏 HTML 元素的功能。 这种方法适用于各种需要动态控制元素可见性的场景，例如，展开/折叠内容、显示/隐藏详细信息等。重要的是，要理解 React 的状态管理机制，并根据实际情况选择合适的实现方式。
