使用 React 和 Lodash 动态显示/隐藏 HTML 元素
在前端开发中，根据业务逻辑动态控制页面元素的显示与隐藏是常见需求。结合 React 的组件状态管理和 Lodash 的工具函数，可以高效、简洁地实现这类功能，同时减少重复代码，提升可维护性。
核心思路
实现动态显示/隐藏的核心逻辑包含三个部分：
使用 React 的
useState钩子管理控制显示状态的变量通过 Lodash 提供的工具函数处理条件判断、防抖节流等逻辑，避免直接在组件中写复杂的条件代码
利用 JSX 的条件渲染语法，根据状态变量和 Lodash 函数的返回结果决定是否渲染目标元素
基础示例：基于状态切换显示/隐藏
最基础的场景是通过按钮点击切换元素的显示隐藏状态，结合 Lodash 的 noop 或 identity 等简单工具函数简化逻辑处理。
import React, { useState } from 'react';
import { identity } from 'lodash';
const ToggleDisplayDemo = () => {
// 管理显示状态，默认显示
const [isVisible, setIsVisible] = useState(true);
// 使用 Lodash 的 identity 函数处理状态切换，实际场景可替换为更复杂的逻辑判断
const handleToggle = () => {
setIsVisible(prev => !identity(prev));
};
return (
<div className="toggle-container">
<button onClick={handleToggle}>
{isVisible ? '隐藏内容' : '显示内容'}
</button>
{/* 条件渲染目标元素 */}
{isVisible && (
<div className="content-box">
<p>这是通过状态控制显示/隐藏的内容区域</p>
<p>点击上方按钮可以切换当前区域的显示状态</p>
</div>
)}
</div>
);
};
export default ToggleDisplayDemo;进阶示例：结合 Lodash 条件判断函数控制显示
在复杂业务场景中，显示隐藏往往依赖多个条件的组合判断，此时可以使用 Lodash 的 cond、matches 等函数封装判断逻辑，让代码更清晰。
import React, { useState } from 'react';
import { cond, matches, constant, stubTrue } from 'lodash';
const AdvancedDisplayDemo = () => {
// 模拟用户权限和登录状态
const [userInfo, setUserInfo] = useState({
isLogin: false,
role: 'guest', // guest | user | admin
});
// 使用 Lodash cond 封装显示判断逻辑：不同条件下返回不同的显示结果
const getAdminPanelVisible = cond([
// 已登录且是管理员，显示管理面板
[matches({ isLogin: true, role: 'admin' }), constant(true)],
// 其他情况都不显示
[stubTrue, constant(false)],
]);
// 模拟登录操作
const handleLogin = (role) => {
setUserInfo({ isLogin: true, role });
};
// 模拟退出登录
const handleLogout = () => {
setUserInfo({ isLogin: false, role: 'guest' });
};
return (
<div className="user-container">
<div className="operate-area">
{!userInfo.isLogin ? (
<>
<button onClick={() => handleLogin('user')}>登录为普通用户</button>
<button onClick={() => handleLogin('admin')}>登录为管理员</button>
</>
) : (
<button onClick={handleLogout}>退出登录</button>
)}
</div>
{/* 普通用户内容，登录即可显示 */}
{userInfo.isLogin && (
<div className="user-content">
<p>欢迎回来，当前角色：{userInfo.role}</p>
<p>这是普通用户可见的内容区域</p>
</div>
)}
{/* 管理面板，仅管理员可见 */}
{getAdminPanelVisible(userInfo) && (
<div className="admin-panel">
<h3>管理员面板</h3>
<p>这是仅管理员可见的管理功能区域</p>
<ul>
<li>用户管理</li>
<li>内容审核</li>
<li>系统配置</li>
</ul>
</div>
)}
</div>
);
};
export default AdvancedDisplayDemo;场景扩展：防抖控制显示隐藏
在一些搜索提示、动态过滤的场景中，往往需要避免频繁触发显示隐藏逻辑，此时可以结合 Lodash 的 debounce 函数实现防抖控制。
import React, { useState, useCallback, useEffect } from 'react';
import { debounce } from 'lodash';
const DebounceDisplayDemo = () => {
const [searchValue, setSearchValue] = useState('');
const [showTip, setShowTip] = useState(false);
// 防抖处理搜索输入，避免频繁触发提示显示
const debouncedShowTip = useCallback(
debounce((value) => {
// 输入长度大于2时显示提示，否则隐藏
setShowTip(value.length > 2);
}, 300),
[]
);
// 输入框变化时触发防抖函数
const handleSearchChange = (e) => {
const value = e.target.value;
setSearchValue(value);
debouncedShowTip(value);
};
// 组件卸载时取消未执行的防抖函数，避免内存泄漏
useEffect(() => {
return () => {
debouncedShowTip.cancel();
};
}, [debouncedShowTip]);
return (
<div className="search-container">
<input
type="text"
value={searchValue}
onChange={handleSearchChange}
placeholder="输入至少3个字符显示提示"
/>
{/* 根据防抖后的状态显示提示 */}
{showTip && (
<div className="search-tip">
<p>已输入 {searchValue.length} 个字符，符合条件</p>
</div>
)}
</div>
);
};
export default DebounceDisplayDemo;注意事项
使用 Lodash 时建议按需引入工具函数，避免引入整个 Lodash 库导致打包体积过大，例如使用
import { debounce } from 'lodash/debounce'单独引入条件渲染时如果元素隐藏后需要保留 DOM 结构，可以使用 CSS 的
display: none控制，而非直接不渲染，此时可以通过状态动态修改元素的style属性或className防抖、节流函数如果在组件内直接定义，需要配合
useCallback缓存，避免每次渲染都创建新的函数实例，同时在组件卸载时取消未执行的函数复杂的显示隐藏判断逻辑尽量封装为独立的函数，结合 Lodash 的工具函数处理，避免 JSX 中出现过于冗长的条件表达式