当前位置：首页 > React

react中如何进行组件切换

2026-01-26 01:51:17React

组件切换的常见方法

使用条件渲染 根据状态或条件动态渲染不同组件。通过useState管理当前显示的组件，结合if语句或三元运算符切换。

const [currentComponent, setCurrentComponent] = useState('A');

return (
  <div>
    {currentComponent === 'A' ? <ComponentA /> : <ComponentB />}
    <button onClick={() => setCurrentComponent('B')}>切换</button>
  </div>
);

使用路由切换 通过react-router-dom实现基于URL的组件切换。定义路由配置后，组件会根据路径自动匹配渲染。

react中如何进行组件切换

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

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

使用动态组件加载 通过React.lazy和Suspense实现按需加载组件，适合大型应用优化性能。

react中如何进行组件切换

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

使用状态管理库 在Redux或Context API中存储当前组件标识，通过全局状态控制切换。

// 通过Context示例
const ComponentContext = createContext();

function App() {
  const [component, setComponent] = useState('A');

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

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

使用CSS切换显示 通过CSS的display属性控制组件显隐，适合简单场景。

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

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