Next.js/React中如何获取动态导入组件的名称或路径？

要获取动态导入成功的组件路径或名称，你可以在dynamic的加载函数中，利用Promise的.then钩子记录成功加载的路径，再通过React状态保存下来。同时修正原代码中重复路径的问题，并用React状态管理错误信息（避免普通数组无法触发重渲染）。

步骤1：引入必要的hooks并初始化状态 #

import { useState } from 'react';
import dynamic from 'next/dynamic';

export default function YourComponent({ type, templateFolder, publication, templateName, channel }) {
  const [loadedPath, setLoadedPath] = useState('');
  const [componentName, setComponentName] = useState('');
  const [errors, setErrors] = useState([]);

  // 从路径中提取组件名称的工具函数
  const extractComponentName = (path) => {
    const fileName = path.split('/').pop();
    // 移除文件后缀，处理拼接符（_/+）
    return fileName.replace(/\.(jsx|tsx)$/, '').split(/[_+]/)[0];
  };

步骤2：重构动态加载逻辑 #

用递归方式依次尝试加载路径，成功后记录路径和组件名称：

const DynamicComponent = dynamic(
    () => {
      // 按优先级定义所有待尝试的路径
      const loadPaths = [
        `./${type}/${templateFolder}/${publication}_${templateName}+${channel}`,
        `./${type}/${templateFolder}/${templateName}+${channel}`,
        `./${type}/${templateFolder}/${publication}_${templateName}`,
        `./${type}/${templateFolder}/${templateName}`,
        './EmptyComponent'
      ];

      // 递归尝试加载路径
      const attemptLoad = (index) => {
        if (index >= loadPaths.length) return Promise.reject('All component paths failed');
        
        return import(loadPaths[index])
          .then((module) => {
            // 记录成功加载的路径和组件名称
            setLoadedPath(loadPaths[index]);
            setComponentName(extractComponentName(loadPaths[index]));
            // 确保返回正确的组件导出（兼容默认导出和具名导出）
            return module.default ? { default: module.default } : module;
          })
          .catch((e) => {
            // 记录错误信息
            setErrors(prev => [...prev, e.message]);
            // 尝试下一个路径
            return attemptLoad(index + 1);
          });
      };

      return attemptLoad(0);
    },
    { ssr: false }
  );

步骤3：使用状态和组件 #

在渲染时可以直接使用保存的路径或组件名称：

return (
    <>
      {/* 可选：显示加载信息 */}
      {loadedPath && (
        <div>
          <p>成功加载路径：{loadedPath}</p>
          <p>组件名称：{componentName}</p>
        </div>
      )}
      {/* 渲染动态组件 */}
      <DynamicComponent />
    </>
  );
}

关键说明 #

1. 状态管理：用useState保存loadedPath、componentName和errors，确保状态变化能触发组件重渲染。
2. 路径提取名称：通过字符串处理从路径中提取组件名，比依赖组件的displayName更可靠（很多自定义组件可能没设置displayName）。
3. 递归加载：用递归替代多个链式.catch，逻辑更清晰，也方便后续调整路径优先级。

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