为什么要用commonjs 加载组件
需求场景: 现在有大量的子组件存放在对应文件夹, 但是我在父组件每次只需加载其中一个即可,我不想一次性导入大量的子组件,然后加判断筛选出对应组件。这样代码可能会非常多、杂( 比如我有20个子组件,那么我要写20个import);
于是我通过require动态载入
直接上代码
import React from 'react';
const options = [ // 组件列表
{
label: '纯布局组件',
value: 'Parent',
path: '/Parent/Parent',
},
{
label: '轮播布局组件1',
value: 'ParentSlider1',
path: '/Parent/ParentSlider1/ParentSlider1',
},
{
label: '标题-1',
value: 'Title-1',
path: '/Title/Title-1/Title-1',
},
];
export default function ComponentList(props) {
const { component, componentIndex, componentProps } = props; // component 组件的英文名(字符串)
const pathThis = selectOptions.find((x) => {
return x.value === component; // 根据组件名字查找对应路径
})?.path;
if(!pathThis){
console.error('未找到组件的path 无法加载组件');
return null;
}
// const truePath = `@/pages/BigScreen/Components${pathThis}`;
// const ThisComponent = require(truePath).default;
const ThisComponent = require(`@/pages/BigScreen/Components${pathThis}`).default; // 使用common.js 加载组件
return <ThisComponent {...componentProps} />;
}
遇到的问题
require函数的参数 如果是直接写成一个变量 如 上方代码中的注释部分. 会直接报错(加载不到对应模块)
为什么?
参考 commonjs规范 第4章 require命令
加载规则
- 核心模块 http,fs 等直接返回模块
- / 开头加载全局的文件,再加载文件夹
- ./ 和 …/ 开头先加载文件,再加载文件夹
- 非核心模块,路径里也没有 / ./ …/ 的则去 node_module 里加载文件夹
如何直接加载整个目录
参考 commonjs规范