ReactJS中如何以符合React规范的方式实现不同div显隐切换

云上老周

2026-8-29

React 状态驱动的标准实现方案

React 是声明式UI框架，开发时不需要手动操作真实DOM修改样式，所有UI变化都由组件状态驱动，状态更新后React会自动完成DOM的修改，这也是React和原生JS直接操作DOM写法最核心的区别。

核心实现逻辑

引入React内置的useState Hook定义组件状态，用来标记当前需要展示的div
按钮点击时只需要修改状态值，不需要查询DOM节点修改样式
JSX中根据状态值动态控制div的显示隐藏，同时修复原代码中return部分多根节点的语法错误

完整可运行代码

import { useState } from 'react';

export default function Provider() {
  // 状态值默认设为'first'，即页面初始加载展示第一个div
  const [activeTab, setActiveTab] = useState('first');

  return (
    <>
      <div style={{ display: activeTab === 'first' ? 'block' : 'none' }}>
        First Div Content
      </div>
      <div style={{ display: activeTab === 'second' ? 'block' : 'none' }}>
        Second Div Content
      </div>
      <button onClick={() => setActiveTab('first')}>First Button</button>
      <button onClick={() => setActiveTab('second')}>Second Button</button>
    </>
  );
}

可选优化：条件渲染

如果你不需要保留隐藏div的DOM节点（比如隐藏的div里有表单不需要保留输入值），可以直接用条件渲染，非激活状态的div不会被挂载到DOM树，性能更好：

import { useState } from 'react';

export default function Provider() {
  const [activeTab, setActiveTab] = useState('first');

  return (
    <>
      {activeTab === 'first' && <div>First Div Content</div>}
      {activeTab === 'second' && <div>Second Div Content</div>}
      <button onClick={() => setActiveTab('first')}>First Button</button>
      <button onClick={() => setActiveTab('second')}>Second Button</button>
    </>
  );
}