当前位置：首页 > React

react实现组件切换

2026-01-27 08:22:10React

React 组件切换的实现方法

在 React 中实现组件切换可以通过多种方式完成，以下是常见的几种方法：

使用条件渲染

通过状态控制当前渲染的组件，利用条件语句（如 if 或三元表达式）决定显示哪个组件。

function App() {
  const [showComponentA, setShowComponentA] = useState(true);

  return (
    <div>
      <button onClick={() => setShowComponentA(!showComponentA)}>
        Toggle Component
      </button>
      {showComponentA ? <ComponentA /> : <ComponentB />}
    </div>
  );
}

使用路由（React Router）

对于多页面应用，可以通过 react-router-dom 实现基于 URL 的组件切换。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

使用动态组件映射

通过对象或数组存储组件，根据条件动态选择要渲染的组件。

const components = {
  a: ComponentA,
  b: ComponentB
};

function App() {
  const [currentComponent, setCurrentComponent] = useState('a');

  const ComponentToRender = components[currentComponent];

  return (
    <div>
      <button onClick={() => setCurrentComponent('b')}>Switch</button>
      <ComponentToRender />
    </div>
  );
}

使用状态管理库

对于复杂应用，可以通过 Redux 或 Context API 管理组件切换状态。

const ComponentContext = createContext();

function App() {
  const [currentComponent, setCurrentComponent] = useState('a');

  return (
    <ComponentContext.Provider value={{ currentComponent, setCurrentComponent }}>
      <DisplayComponent />
    </ComponentContext.Provider>
  );
}

function DisplayComponent() {
  const { currentComponent } = useContext(ComponentContext);
  return currentComponent === 'a' ? <ComponentA /> : <ComponentB />;
}

使用 CSS 切换

通过 CSS 控制组件的显示/隐藏，适合简单的 UI 切换。

function App() {
  const [showA, setShowA] = useState(true);

  return (
    <div>
      <button onClick={() => setShowA(!showA)}>Toggle</button>
      <div style={{ display: showA ? 'block' : 'none' }}>
        <ComponentA />
      </div>
      <div style={{ display: !showA ? 'block' : 'none' }}>
        <ComponentB />
      </div>
    </div>
  );
}

选择哪种方法取决于具体需求：