React实现点击按钮切换Counter与Random组件的方法咨询

核心逻辑是利用React的状态管理控制组件显示：通过useState维护当前要展示的组件标识，点击按钮时更新这个标识，最后根据标识条件渲染对应组件。

步骤1：在App.js中实现切换逻辑 #

先导入useState钩子，以及你的Counter和Random组件，再通过状态控制渲染：

import { useState } from 'react';
import Counter from './Counter';
import Random from './Random';

function App() {
  // 用state存储当前激活的组件名称，初始值设为'counter'
  const [activeComponent, setActiveComponent] = useState('counter');

  return (
    <div className="App">
      {/* 切换按钮 */}
      <button onClick={() => setActiveComponent('counter')}>显示计数器</button>
      <button onClick={() => setActiveComponent('random')}>显示随机数组件</button>

      {/* 根据状态渲染对应组件 */}
      {activeComponent === 'counter' ? <Counter /> : <Random />}
    </div>
  );
}

export default App;

步骤2：多组件场景优化（可选） #

如果后续要扩展更多组件，用对象映射的方式可以避免过多条件判断，更易维护：

import { useState } from 'react';
import Counter from './Counter';
import Random from './Random';

function App() {
  const [activeComponent, setActiveComponent] = useState('counter');

  // 组件映射表：键是标识，值是对应组件
  const componentMap = {
    counter: <Counter />,
    random: <Random />
  };

  return (
    <div className="App">
      <button onClick={() => setActiveComponent('counter')}>显示计数器</button>
      <button onClick={() => setActiveComponent('random')}>显示随机数组件</button>

      {/* 直接从映射表中取对应组件 */}
      {componentMap[activeComponent]}
    </div>
  );
}

export default App;

关键知识点说明 #

• useState：React函数组件的基础状态钩子，用来管理可变状态，状态更新时组件会自动重新渲染。
• 条件渲染：React支持通过逻辑运算符或对象映射，根据状态动态切换渲染内容。
• 点击事件：按钮的onClick属性接收触发函数，点击时更新状态，进而触发组件切换。

Counter.js、Random.js、Index.js保持你原有的代码即可，无需额外修改。

内容的提问来源于stack exchange，提问作者Nisha Shajahan