使用 React 和 Lodash 动态显示/隐藏 HTML 元素

本文旨在解决如何使用 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;

在上面的代码中：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

立即学习“前端免费学习笔记（深入）”；

1. useState({}) 初始化一个空对象 visibleColumns，用于存储每个 column 的可见性状态。Key 是 column 的名字， value 是一个 boolean， 代表是否显示。
2. toggleContent(key) 函数用于切换特定 column 的可见性状态。 它接受一个 key 参数，表示要切换的 column 的 key。
3. onClick={() => toggleContent(key)} 将 toggleContent 函数绑定到按钮的 onClick 事件。 当按钮被点击时，toggleContent 函数会被调用，并传入相应的 key。
4. 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 的状态管理机制，并根据实际情况选择合适的实现方式。

以上就是使用 React 和 Lodash 动态显示/隐藏 HTML 元素的详细内容，更多请关注php中文网其它相关文章！