React JS中函数组件点击按钮触发渲染新组件的实现方法

核心逻辑是通过useState状态变量控制组件的显隐/切换，具体实现步骤如下：

• 首先在UserManagement组件内引入useState钩子，声明布尔类型的控制状态showEmployeeManagement，默认值设为false
• 给触发按钮绑定点击事件，事件触发时修改上述状态的值，按需配置为单次显示或者切换显隐逻辑
• 在JSX模板中通过条件渲染语法，当状态为true时渲染EmployeeManagement组件

完整代码示例：

import { useState } from 'react';
// 替换为你实际的EmployeeManagement组件导入路径
import EmployeeManagement from './EmployeeManagement';

const UserManagement = () => {
  // 状态：控制员工管理组件是否展示
  const [showEmployeeManagement, setShowEmployeeManagement] = useState(false);

  // 按钮点击事件处理
  const handleToggleEmployee = () => {
    // 点击后直接显示
    setShowEmployeeManagement(true);
    // 如果需要点击切换显隐，替换为下行代码即可
    // setShowEmployeeManagement(prev => !prev)
  };

  return (
    <div>
      {/* 原有UserManagement组件的业务内容 */}
      <h2>用户管理</h2>
      <button onClick={handleToggleEmployee}>切换到员工管理</button>

      {/* 1. 两个组件同时存在的场景：条件渲染目标组件 */}
      {showEmployeeManagement && <EmployeeManagement />}

      {/* 2. 两个组件二选一展示的场景：使用三目运算符
      {showEmployeeManagement ? <EmployeeManagement /> : (
        <div>
          这里放UserManagement默认要展示的其他内容
        </div>
      )}
      */}
    </div>
  );
};

export default UserManagement;

补充说明：

• 仅需要内部组件切换的场景用上述状态控制方案即可，无需额外引入依赖
• 如果需要匹配地址栏路径、支持浏览器回退按钮，再考虑引入React Router做路由级别的切换

内容的提问来源于stack exchange，提问作者Bismi David