React中如何实现动态组件与动态导入？按需加载用户选择组件

问题背景 #

需要根据用户勾选的组件列表，仅导入并渲染列表中存在的组件。相关列表及当前尝试的代码如下：

默认组件列表 #

const Defaultlist = [
    {
      name: 'test one',
      id: 1,
      componentName: 'TestOne',
    },
    {
      name: 'test two',
      id: 2,
      componentName: 'TestOne',
    },
    {
      name: 'test three',
      id: 3,
      componentName: 'TestThree',
    },
];

用户选择的组件列表 #

const List = [
    {
      name: 'test one',
      id: 1,
      componentName: 'TestOne',
    },
    {
      name: 'test two',
      id: 2,
      componentName: 'TestTwo',
    },
];

当前尝试的代码 #

import React from 'react';
import { useSelector } from 'react-redux';
//import { OneComponent } from `./${dd}`;

export const ListChoice = ({ control, watch }) => {

  const langue = useSelector((state) => state.langue.langueSelected);
  const List = watch('user.list');

  return (
    <div>
      <h2 className="title">{langue?.pleaseSelect}</h2>
      {List?.map((el) => {
        const OneComponent = el.componentName;
        return <OneComponent />;
      })}
    </div>
  );
};

问题分析 #

你的思路方向是对的，但直接把字符串el.componentName当作组件使用无效——React需要的是实际的组件类/函数，而非字符串。要实现动态导入，需结合React的动态导入能力或提前构建组件映射表。

解决方案 #

方案1：使用React.lazy + Suspense实现按需代码分割 #

适合生产环境，仅加载用户勾选组件对应的代码块：

import React, { lazy, Suspense } from 'react';
import { useSelector } from 'react-redux';

// 定义动态加载组件的方法（假设组件文件存放在./components目录，文件名与componentName一致）
const loadComponent = (componentName) => {
  return lazy(() => import(`./components/${componentName}`));
};

export const ListChoice = ({ control, watch }) => {
  const langue = useSelector((state) => state.langue.langueSelected);
  const userSelectedList = watch('user.list');

  return (
    <div>
      <h2 className="title">{langue?.pleaseSelect}</h2>
      {/* Suspense用于提供组件加载时的占位内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        {userSelectedList?.map((el) => {
          const DynamicComponent = loadComponent(el.componentName);
          // 必须添加唯一key避免渲染异常
          return <DynamicComponent key={el.id} />;
        })}
      </Suspense>
    </div>
  );
};

方案2：提前导入所有组件，通过映射表匹配渲染 #

若组件数量不多，无需代码分割，可提前导入所有可选组件：

import React from 'react';
import { useSelector } from 'react-redux';
// 提前导入所有可能用到的组件
import TestOne from './components/TestOne';
import TestTwo from './components/TestTwo';
import TestThree from './components/TestThree';

// 构建组件名称与实际组件的映射表
const componentMap = {
  TestOne,
  TestTwo,
  TestThree,
};

export const ListChoice = ({ control, watch }) => {
  const langue = useSelector((state) => state.langue.langueSelected);
  const userSelectedList = watch('user.list');

  return (
    <div>
      <h2 className="title">{langue?.pleaseSelect}</h2>
      {userSelectedList?.map((el) => {
        const Component = componentMap[el.componentName];
        // 处理组件名称不存在的情况
        if (!Component) return null;
        return <Component key={el.id} />;
      })}
    </div>
  );
};

注意事项 #

• 动态导入时，文件路径需保留固定前缀（如./components/${componentName}），不能完全动态，否则打包工具无法正确进行代码分割。
• 使用React.lazy必须配合Suspense组件，提供加载状态的占位内容。
• 循环渲染组件时，必须添加唯一的key属性，避免React渲染错误。

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