响应式地显示隐藏内容：React 组件中动态元素的事件处理与状态管理

本文旨在解决在 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;

代码解析：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

1. useState Hook: const [visibility, setVisibility] = useState({}); 使用 useState 创建一个名为 visibility 的状态变量，初始值是一个空对象。这个对象用于存储每个列的显示状态，键是列的 key，值是布尔值，表示是否显示内容。
2. toggleVisibility 函数: const toggleVisibility = (key) => { ... } 定义了一个 toggleVisibility 函数，该函数接收一个 key 作为参数，用于切换对应列的显示状态。它使用 setVisibility 函数来更新 visibility 状态。
   • prevVisibility => ({ ...prevVisibility, [key]: !prevVisibility[key] })：这是一个函数式更新，确保基于先前的状态进行更新。它创建了一个新的对象，该对象包含了先前状态的所有属性，并且将指定 key 的值取反。
3. _.map 循环: _.map(dummyData, (data, key) => ( ... )) 使用 _.map 循环遍历 dummyData 对象，为每个键值对渲染一个组件。
4. onClick 事件: <div className="show-content-btn" onClick={() => toggleVisibility(key)}>V</div> 在显示/隐藏按钮上绑定 onClick 事件，当点击按钮时，调用 toggleVisibility 函数，并传入当前列的 key。
5. 条件渲染: <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 的数据驱动视图的思想，使得代码更加简洁、可维护和易于测试。 该方法适用于需要根据用户交互动态显示和隐藏内容的场景，例如手风琴效果、可折叠面板等。

以上就是响应式地显示隐藏内容：React 组件中动态元素的事件处理与状态管理的详细内容，更多请关注php中文网其它相关文章！