React中如何实现条件导入？解决多页面同布局数据复用问题

我有个React网站，三个页面布局相同但内容不同，我把每个页面的内容做成数组，想通过遍历渲染避免组件代码重复，用统一变量名实现遍历。目前用require匹配URL的方式能正常工作，但听说这种方式在React里有性能问题，不是最佳实践，于是尝试用import结合React.lazy实现条件导入，结果没成功。

现有可用的require实现代码：

let pagedata = [];
if (matchpage1) {
    pagedata = require("./data").page1data;
} else if (matchpage2) {
    pagedata = require("./data").page2data;
} else if (matchpage3) {
    pagedata = require("./data").page3data;
}

return (
  // 遍历pagedata渲染内容
  pagedata.map((item) => {
    // 渲染逻辑
  })
);

尝试的React.lazy导入代码（未成功）：

let pagedata = [];
if (matchpage1) {
    pagedata = React.lazy(() => import('./pagedata1'));
} else if (matchpage2) {
    pagedata = React.lazy(() => import('./pagedata2'));
} else if (matchpage3) {
   pagedata = React.lazy(() => import('./pagedata3'));
}

想问下我哪里操作错了？

你的核心错误是用错了React.lazy的用途：React.lazy是专门用来懒加载React组件的，不能用来加载普通的数据文件（比如导出数组/对象的JS文件），这也是你尝试的代码无效的原因。

正确的动态加载数据方式 #

要动态加载纯数据，直接用原生的import()函数即可，但因为import()返回的是Promise，属于异步操作，需要结合React的hooks（useState+useEffect）来处理异步数据的加载和状态管理，示例代码如下：

import { useState, useEffect } from 'react';

function YourPageComponent() {
  const [pagedata, setPagedata] = useState([]);

  useEffect(() => {
    let dataImport;
    if (matchpage1) {
      dataImport = import('./pagedata1');
    } else if (matchpage2) {
      dataImport = import('./pagedata2');
    } else if (matchpage3) {
      dataImport = import('./pagedata3');
    }

    // 处理异步导入
    if (dataImport) {
      dataImport.then(module => {
        // 注意：如果你的数据是默认导出，用module.default；如果是命名导出，用module.xxx
        setPagedata(module.default);
      }).catch(err => {
        console.error('加载数据失败:', err);
      });
    }
  }, [matchpage1, matchpage2, matchpage3]); // 依赖项根据实际匹配变量调整

  // 加载完成前可以加个加载状态
  if (pagedata.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <>
      {pagedata.map((item, index) => (
        // 你的渲染逻辑，注意加key
        <div key={index}>{/* 内容 */}</div>
      ))}
    </>
  );
}

额外说明 #

1. 如果你的数据文件是命名导出（比如export const page1data = [...]），那在then里要改成setPagedata(module.page1data)（对应不同文件的导出名）。
2. 这种动态import方式会被webpack等打包工具拆分成单独的chunk，实现按需加载，比require的方式更符合React的性能优化实践。
3. 不需要用React.lazy处理数据，它只针对组件懒加载，比如当你想按需加载某个页面组件时才用它，配合<Suspense>组件使用。

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