本文旨在解决如何使用 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 ( {key}
toggleContent(key)} style={{ cursor: 'pointer' }} > V {data}
); }) );}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] 的值动态设置
元素的 display 属性。如果 visibleColumns[key] 为 true，则显示内容；否则，隐藏内容。
注意事项
Key 属性: 在 _.map 中，为每个生成的组件添加唯一的 key 属性，可以帮助 React 更好地追踪组件的变化，提高渲染性能。状态管理: useState Hook 是管理组件状态的常用方法。 在复杂的应用中，可以考虑使用 Redux 或 Context API 等更高级的状态管理方案。样式控制: 可以使用 CSS 类名来控制元素的样式，而不是直接使用内联样式。 这可以提高代码的可维护性和可读性。
总结
通过使用 useState Hook 和 onClick 事件，我们可以轻松地实现动态显示/隐藏 HTML 元素的功能。 这种方法适用于各种需要动态控制元素可见性的场景，例如，展开/折叠内容、显示/隐藏详细信息等。重要的是，要理解 React 的状态管理机制，并根据实际情况选择合适的实现方式。
以上就是使用 React 和 Lodash 动态显示/隐藏 HTML 元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571976.html
微信扫一扫 
支付宝扫一扫 
