如何基于输入动态导入React组件并实现按需渲染？

你之前的代码问题在于直接返回了React.lazy()的结果（组件类型），而没有将其作为JSX实例渲染。以下是符合需求的正确实现：

基础版本 #

import { Suspense, lazy } from 'react';

export default function CreationForm() {
  const docs = [1, 3, 5]; // 实际项目中为state变量

  return (
    <Suspense fallback={<div>Loading...</div>}>
      {docs.map((val) => {
        // 动态创建懒加载组件
        const DynamicComponent = lazy(() => import(`documents/${val}.jsx`));
        // 渲染组件实例，必须添加唯一key
        return <DynamicComponent key={val} />;
      })}
    </Suspense>
  );
}

优化版本（缓存已加载组件） #

如果docs数组频繁变化，建议用useMemo缓存组件映射，避免重复创建lazy包装：

import { Suspense, lazy, useMemo } from 'react';

export default function CreationForm() {
  const docs = [1, 3, 5]; // 实际项目中为state变量

  // 仅当docs变化时重新生成组件映射
  const componentMap = useMemo(() => {
    return docs.reduce((map, val) => {
      map[val] = lazy(() => import(`documents/${val}.jsx`));
      return map;
    }, {});
  }, [docs]);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      {docs.map((val) => {
        const Component = componentMap[val];
        return <Component key={val} />;
      })}
    </Suspense>
  );
}

关键说明 #

• React.lazy()返回的是一个组件类型，必须以<Component />的形式才能被React渲染，这是你之前代码的核心问题。
• 因为docs本身就是state变量，useMemo会自动监听其变化，无需额外维护重复状态。
• 每个动态渲染的组件必须添加唯一key，避免React渲染警告。

内容的提问来源于stack exchange，提问作者A-fandino