React组件自动导入导出：能否批量导入文件夹组件至Components？

不管你用React、Vue还是其他前端框架，都能实现把components文件夹里的组件批量挂载到Components对象下，以Components.Button的形式复用。

步骤1：给components文件夹做统一出口 #

在components文件夹根目录新建一个index.js（TypeScript用index.ts，Vue用index.js），用来批量导入并导出所有组件。

步骤2：批量导入文件夹内组件 #

根据你的项目环境选择对应的写法：

• Webpack/Create React App 环境：

  // components/index.js
  const components = {};
  // 匹配当前文件夹下的js/jsx组件，不递归子文件夹（要递归就把第二个参数改成true）
  const requireComponent = require.context('./', false, /\.(js|jsx)$/);
  
  requireComponent.keys().forEach(filePath => {
    // 提取组件名，比如从'./Button.jsx'拿到'Button'
    const componentName = filePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    // 拿到组件导出（兼容默认导出和命名导出）
    const component = requireComponent(filePath).default || requireComponent(filePath);
    components[componentName] = component;
  });
  
  export default components;
  

• Vite 环境：

  // components/index.js
  const components = {};
  // 递归匹配所有.vue组件，eager设为true表示同步导入
  const componentModules = import.meta.glob('./**/*.vue', { eager: true });
  
  for (const path in componentModules) {
    // 从文件路径里提取组件名
    const componentName = path.split('/').pop().replace(/\.\w+$/, '');
    components[componentName] = componentModules[path].default;
  }
  
  export default components;
  

步骤3：把组件挂载到你的Components组件上 #

在你的Components文件里，导入上面的批量导出，然后把所有组件挂载为Components的静态属性：

// Components.jsx（以React为例）
import allComponents from './components';

// 这里的Components可以是一个空组件，主要用来承载子组件属性
function Components() {
  return null; // 若需要它作为渲染容器，可根据props动态渲染，比如return React.createElement(props.component)
}

// 批量挂载组件到Components上
Object.entries(allComponents).forEach(([name, component]) => {
  Components[name] = component;
});

export default Components;

步骤4：使用组件 #

之后在其他文件里导入Components，就能直接用Components.Button这种形式了：

import Components from './Components';

// React中使用示例
function App() {
  return (
    <div>
      <Components.Button />
      <Components.Input />
    </div>
  );
}

这种方式的核心就是通过统一入口批量收集组件，再挂载到目标对象上，完全符合你的需求。

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