如何基于prop动态导入文件中指定React组件，实现按需加载优化性能

错误原因 #

1. 你当前触发Unexpected token报错的核心原因是：ES6对象解构语法不支持直接用模板字符串作为动态键名，这种写法本身不符合JS语法规范。
2. 除此之外你的代码还有三处隐藏问题：

• 动态导入import()直接写在组件函数体顶层，每次组件重新渲染都会重复触发导入逻辑，造成性能浪费
• 状态更新函数名称写错，你定义的是setComp，代码里误用为setIcon
• 组件初始状态为null，直接渲染<Comp />会抛出错误，需要增加加载态判断

修复方案 #

方案1：手动管理加载状态

修改后的App.js代码如下：

import { useState, useEffect } from 'react';

function App({prop}) {
  const [Comp, setComp] = useState(null);

  useEffect(() => {
    // 提前校验prop合法性，避免导入不存在的组件
    if (!['Test', 'SuperTest'].includes(prop)) return;
    import('./Test').then(mod => {
      // 用方括号访问动态键，拿到对应组件
      const newComp = mod[prop];
      setComp(() => newComp);
    });
  }, [prop]); // 仅prop变化时才重新执行导入逻辑

  // 组件加载完成前渲染占位内容
  if (!Comp) return <div>加载中...</div>;

  return (
    <div className="App">
      <Comp />
    </div>
  );
}

export default App;

方案2：使用React内置的lazy+Suspense（更简洁）

React官方提供了懒加载组件的标准实现，不需要手动管理状态，代码更简洁：

import { Suspense, lazy } from 'react';

function App({prop}) {
  if (!['Test', 'SuperTest'].includes(prop)) return <div>组件不存在</div>;

  // 动态映射对应组件，返回default格式适配lazy的要求
  const Comp = lazy(() => import('./Test').then(mod => ({ default: mod[prop] })));

  return (
    <div className="App">
      {/* fallback属性指定加载过程中展示的占位内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Comp />
      </Suspense>
    </div>
  );
}

export default App;

补充说明 #

两种方案都可以满足你按需加载的性能优化需求：目前主流的构建工具（Webpack、Vite等）都会自动对动态导入的模块做代码分割，Test.js会被拆分为独立的资源包，只有当对应prop传入、需要渲染对应组件时才会加载该资源包，不会全量导入文件内容。

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