在 React 中，无法直接将动态 import() 返回的 Promise 作为组件值存入对象，必须先完成异步加载并确保组件已就绪；推荐做法是预先静态导入组件后赋值，或结合 React.lazy + Suspense 实现按需加载。
在 react 中，无法直接将动态 `import()` 返回的 promise 作为组件值存入对象，必须先完成异步加载并确保组件已就绪；推荐做法是预先静态导入组件后赋值，或结合 `react.lazy` + `suspense` 实现按需加载。
在构建路由配置、插件系统或动态渲染逻辑时，开发者常希望将 React 组件以键值对形式组织在对象中（如 mapping = { home: HomeView, profile: ProfilePage }），以便通过字符串动态获取并渲染。但需注意：import() 是一个返回 Promise 的函数，不能直接赋值给对象属性作为可渲染的 React 组件。
❌ 错误写法（运行时会报错）：
const tmpMapping = {
component: import('src/views/tmp.js'), // ❌ 返回 Promise，不是组件
};
// <tmpmapping.component></tmpmapping.component> → 无效：JSX 元素类型不可用
✅ 正确方式一：静态导入（推荐用于确定依赖的场景）
import TmpComponent from 'src/views/tmp.js';
const tmpMapping = {
Component: TmpComponent, // ✅ 直接引用已编译的组件
};
// 在 JSX 中使用
function App() {
return <tmpmapping.component></tmpmapping.component>;
}
✅ 正确方式二：动态加载 + React.lazy（适用于代码分割与懒加载）
vercel-react-best-practices
下载
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
const tmpMapping = {
Component: React.lazy(() => import('src/views/tmp.js')),
};
function App() {
return (
<suspense fallback="{<div">Loading...}>
<tmpmapping.component></tmpmapping.component></suspense>
);
}
⚠️ 注意事项：
- React.lazy 仅支持默认导出（export default），若目标模块使用命名导出，需在 import() 后手动解构并重新默认导出；
- 动态映射对象本身不应在渲染函数内重复创建（避免每次渲染都新建对象导致子组件重挂载）；
- 若需运行时根据条件选择组件，建议配合 useMemo 缓存映射对象，或使用工厂函数封装加载逻辑。
总结：组件映射本质是引用传递，核心原则是——对象值必须为可调用的 React 组件函数或 lazy 包装器，而非 Promise 或模块命名空间。优先静态导入保障类型安全与开发体验；对大型模块，再叠加 lazy + Suspense 实现性能优化。
