React如何用按钮更换组件

使用状态管理切换组件

在React中，可以通过状态管理动态切换组件。创建一个状态变量存储当前显示的组件，通过按钮点击事件更新该状态。

import React, { useState } from 'react';

const ComponentA = () => <div>组件A</div>;
const ComponentB = () => <div>组件B</div>;

function App() {
  const [showComponent, setShowComponent] = useState('A');

  return (
    <div>
      <button onClick={() => setShowComponent('A')}>显示组件A</button>
      <button onClick={() => setShowComponent('B')}>显示组件B</button>
      {showComponent === 'A' ? <ComponentA /> : <ComponentB />}
    </div>
  );
}

使用对象映射组件

当需要切换多个组件时，可以使用对象映射的方式管理组件，使代码更清晰。

const components = {
  A: ComponentA,
  B: ComponentB,
  C: () => <div>组件C</div>
};

function App() {
  const [currentComponent, setCurrentComponent] = useState('A');
  const ComponentToRender = components[currentComponent];

  return (
    <div>
      {Object.keys(components).map(key => (
        <button key={key} onClick={() => setCurrentComponent(key)}>
          显示组件{key}
        </button>
      ))}
      <ComponentToRender />
    </div>
  );
}

通过props传递切换函数

将切换逻辑封装在父组件中，通过props传递给子组件实现控制。

function ParentComponent() {
  const [activeComponent, setActiveComponent] = useState(null);

  return (
    <div>
      <ChildButtons onSelect={setActiveComponent} />
      {activeComponent === 'A' && <ComponentA />}
      {activeComponent === 'B' && <ComponentB />}
    </div>
  );
}

function ChildButtons({ onSelect }) {
  return (
    <div>
      <button onClick={() => onSelect('A')}>显示A</button>
      <button onClick={() => onSelect('B')}>显示B</button>
    </div>
  );
}

使用Context API管理全局状态

对于复杂应用，可以使用Context API在多个层级间共享组件切换状态。

const ComponentContext = React.createContext();

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

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

function Layout() {
  const { currentComponent } = useContext(ComponentContext);

  return (
    <div>
      <Navigation />
      {currentComponent === 'A' ? <ComponentA /> : <ComponentB />}
    </div>
  );
}

function Navigation() {
  const { setCurrentComponent } = useContext(ComponentContext);

  return (
    <nav>
      <button onClick={() => setCurrentComponent('A')}>A</button>
      <button onClick={() => setCurrentComponent('B')}>B</button>
    </nav>
  );
}