本文讲解如何将原生 JavaScript 的 DOM 操作逻辑（如按钮样式切换、事件监听）安全迁移到 React，避免因元素未挂载导致的 null 错误，并提供可复用、符合 React 生命周期规范的实现方案。
本文讲解如何将原生 javascript 的 dom 操作逻辑（如按钮样式切换、事件监听）安全迁移到 react，避免因元素未挂载导致的 `null` 错误，并提供可复用、符合 react 生命周期规范的实现方案。
在 React 应用中，直接使用 document.getElementById() 或 querySelector 获取 DOM 元素并绑定事件，是一种反模式——因为 React 控制着组件的渲染生命周期，DOM 节点可能尚未生成（尤其在服务端渲染或异步加载场景下），导致 filterBar 为 null，进而触发 Cannot read properties of null 错误。
正确的做法是：将过滤栏封装为独立的 React 组件，利用状态（useState）管理选中项，通过内联事件处理器（onClick）响应点击，并用条件样式控制 UI 状态。这样既保证了渲染与逻辑的一致性，又完全规避了 DOM 就绪时机问题。
以下是一个完整、生产就绪的 FilterBar 组件示例：
import React, { useState } from 'react';
const FilterBar = () => {
// 初始化默认选中项（例如 "Sve"）
const [activeFilter, setActiveFilter] = useState('btnFilterSve');
// 过滤按钮配置：id 和显示文本
const filterButtons = [
{ id: 'btnFilterSve', label: 'Sve' },
{ id: 'btnFilterKlub', label: 'Klub' },
{ id: 'btnFilterRestoran', label: 'Restoran' },
{ id: 'btnFilterBar', label: 'Bar' },
{ id: 'btnFilterPab', label: 'Pab' },
{ id: 'btnFilterKafa', label: 'Kafa' },
{ id: 'btnFilterSplav', label: 'Splav' },
{ id: 'btnFilterOstalo', label: '...' }
];
const handleClick = (id) => {
setActiveFilter(id);
};
return (
<div classname="filterBar" id="filterBar">
{filterButtons.map((btn) => (
<button key="{btn.id}" type="button" id="{btn.id}" classname="{`btnFilter" btn.id : onclick="{()"> handleClick(btn.id)}
>
{btn.label}
</button>
))}
</div>
);
};
export default FilterBar;
并在 MainPage 中引入并使用：
import React from "react";
import FilterBar from "./FilterBar"; // ✅ 替换原生 JS 逻辑
class MainPage extends React.Component {
switchMidSection = () => { /* ... */ };
render() {
return (
<div>
<div classname="topContainer">
<div classname="topContainerHorizontal">
{/* 其他顶部元素保持不变 */}
</div>
</div>
{/* ✅ 使用 React 组件替代原生 DOM 操作 */}
<filterbar></filterbar>
{/* 其余内容 */}
</div>
);
}
}
export default MainPage;
配套 CSS 示例（支持 active 状态）：
.filterBar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
}
.btnFilter {
background-color: #d9d9d9;
color: #696969;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-family: 'Inria Sans', sans-serif;
transition: all 0.2s ease;
}
.btnFilter.active {
background-color: #7c0001;
color: #fff;
}
/* 响应式优化（可选） */
@media (max-width: 768px) {
.btnFilter {
padding: 6px 12px;
font-size: 14px;
}
}
✅ 关键优势总结：
- 零 DOM 时序风险：React 在 render() 完成后才生成真实 DOM，onClick 和状态更新天然同步；
- 可维护性强：样式与逻辑解耦，active 类由状态驱动，无需手动遍历所有按钮重置样式；
- 可扩展性好：新增过滤项只需修改 filterButtons 数组，无需调整事件绑定逻辑；
- 符合 React 最佳实践：避免 useEffect + ref 的冗余操作，轻量、直观、易测试。
⚠️ 注意事项：
- 不要再在 index.html 中保留 <script src="Filter.js" defer> —— React 应用的所有交互逻辑应由组件自身管理；</script>
- 若需与父组件通信（如通知筛选条件变更），可通过 onFilterChange 回调 props 实现；
- 如需持久化选中状态（刷新不丢失），可结合 useEffect + localStorage 实现。
至此，你已彻底告别 Cannot read properties of null 错误，并迈出了 React 工程化开发的关键一步。
