React项目中跨文件夹导入模型获取信息生成PDF

1. 先确认模型文件的导出格式 #

假设你的模型文件（比如contractModel.js、projectModel.js）放在src/models目录下，要确保正确导出需要的对象：

// src/models/contractModel.js
export const contract = {
  contractNumber: 'CON-2024-001',
  // 其他合约相关字段
};

// src/models/projectModel.js
export const project = {
  projectId: 'PROJ-007',
  // 其他项目相关字段
};

2. 跨文件夹导入模型 #

根据你的组件所在路径，用相对路径导入模型。比如你的PDF生成组件在src/components/PdfGenerator.js，导入方式如下：

// src/components/PdfGenerator.js
// 从上级目录的models文件夹导入
import { contract } from '../models/contractModel';
import { project } from '../models/projectModel';
// 第三个模型同理，按实际路径导入

如果组件嵌套层级深，比如在src/views/invoice/PdfGenerator.js，就用../../models/contractModel这种多级相对路径。嫌路径麻烦的话，也可以在项目根目录的jsconfig.json（JS项目）或tsconfig.json（TS项目）里配置绝对路径：

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

之后就能直接用import { contract } from 'models/contractModel';导入，不用管层级。

3. 提取信息生成PDF常量 #

导入完成后，直接用模板字符串拼接你需要的内容：

// 生成PDF所需的内容常量
const pdfContent = {
  contractLine: `Contract: '${contract.contractNumber}'`,
  projectLine: `Project ID: '${project.projectId}'`,
  // 第三个模型的信息同理拼接
};

⚠️注意：你例子里的contracNumber是拼写错误，要和模型里的字段名（比如contractNumber）完全一致，否则会取不到值。

4. 排查取不到值的常见问题 #

如果还是拿不到合约编号这类值，检查这几点：

• 模型文件里是否真的导出了对应的对象/字段
• 导入路径是否正确，React项目里路径是区分大小写的，别写错文件名
• 字段名拼写是否和模型里的完全一致，比如别把contractNumber写成contracNumber

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