React中能否用常量替代模块路径实现动态import导入？

你遇到的问题根源在于ES模块的静态import语句必须使用字符串字面量，不能用变量作为路径。打包工具（比如Webpack）在编译阶段就需要确定所有依赖项，没法解析动态拼接的变量路径，所以直接用import content from modulePath会报错。

要实现通过pageName动态切换导入的content，可以用ES模块的动态import()函数，它支持传入变量路径，并且返回一个Promise。结合React的useState和useEffect Hooks就能完成需求，具体修改如下：

import React, { useState, useEffect } from "react"
import PageTitle from "./PageTitle"
import BuildItems from "./BuildItems"

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
    if (+match === 0) return "";
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

const pageName = "Settings";

function View() {
  const [content, setContent] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadContent = async () => {
      try {
        const modulePath = "../" + camelize(pageName);
        // 动态导入目标模块
        const importedModule = await import(modulePath);
        setContent(importedModule.default);
      } catch (err) {
        console.error("加载模块失败:", err);
      } finally {
        setIsLoading(false);
      }
    };

    loadContent();
  }, [pageName]); // pageName变化时自动重新加载对应模块

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="View">
      <PageTitle content={pageName} layout="mini" />
      {content.map(BuildItems)}
    </div>
  );
}

export default View;

关键说明： #

• 动态import()是异步操作，用async/await处理Promise逻辑
• 用useState存储加载到的content和加载状态，避免组件渲染时content为undefined
• useEffect的依赖数组加入pageName，只要pageName修改，就会自动触发新模块的加载
• 加入错误捕获和加载状态提示，避免页面出现异常

这样修改后，你只需要修改pageName的值，就能自动加载对应路径下的模块，获取里面的content数组。

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