使用commonjs加载React组件模块

为什么要用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命令

加载规则

1. 核心模块 http，fs 等直接返回模块
2. / 开头加载全局的文件，再加载文件夹
3. ./ 和 …/ 开头先加载文件，再加载文件夹
4. 非核心模块，路径里也没有 / ./ …/ 的则去 node_module 里加载文件夹

如何直接加载整个目录

参考 commonjs规范