React函数中调用导入组件：Switch使用Login组件未达预期

核心问题 #

• 你导入了Login组件但从未使用，反而定义了一个无效的classListR函数：这个函数既不是合法的React组件（没有返回JSX，直接调用render()会抛出错误），调用它也无法生成可渲染的内容。
• handleCloseUserMenu中定义的components变量只是临时赋值，没有和React状态绑定，无法触发组件重新渲染，就算赋值了组件也不会显示。
• Switch分支逻辑不符合需求：比如你想在点击Logout时显示Login组件，但当前代码只是调用了一个无效函数，完全达不到目的。

修复代码示例 #

import * as React from 'react';
import Login from './login';

// 主组件示例
function App() {
  // 用状态控制当前要显示的内容/组件
  const [currentContent, setCurrentContent] = React.useState(null);
  const [anchorElUser, setAnchorElUser] = React.useState(null);

  const handleCloseUserMenu = (event) => {
    const targeted = event.currentTarget.innerText;

    let content;
    switch (targeted) {
      case 'Logout':
        // 直接赋值Login组件的JSX元素
        content = <Login />;
        break;
      case 'Dashboard':
      case 'Profile':
      case 'Account':
        // 合并相同逻辑的分支
        content = <div>{targeted}</div>;
        break;
      default:
        content = <div>Target Not Found</div>;
    }
    // 更新状态触发渲染
    setCurrentContent(content);
    setAnchorElUser(null);
  };

  return (
    <div>
      {/* 示例菜单按钮，绑定点击事件 */}
      <button onClick={handleCloseUserMenu}>Logout</button>
      <button onClick={handleCloseUserMenu}>Dashboard</button>
      <button onClick={handleCloseUserMenu}>Profile</button>
      <button onClick={handleCloseUserMenu}>Account</button>
      {/* 渲染当前选中的内容 */}
      {currentContent}
    </div>
  );
}

export default App;

关键说明 #

• 使用useState钩子维护当前要显示的内容，状态更新会自动触发React重新渲染。
• 渲染组件时直接赋值JSX元素（如<Login />），不要调用无意义的函数。
• 相同逻辑的switch分支可以合并，简化代码结构。
• 必须在组件的渲染区域（return内）使用状态变量currentContent，否则状态变化无法体现到页面上。

内容的提问来源于stack exchange，提问作者Mr. Mreetunjay Messi