ReactJS组件批量导出后导入报错：Button未找到求助

你的问题根源在于导出方式和导入方式不匹配：你在components/index.js中用export default导出了一个包含组件的对象，但导入时使用了命名导入（import { Button }），而命名导入对应的是ES模块的命名导出，不是default导出对象的属性。

下面是两种可行的解决方法：

方法一：改用命名导出（推荐） #

修改components/index.js，将组件转为命名导出，这样你的原有导入代码可以直接正常使用：

// @flow

export { default as Button } from './Button/Button.component';
export { default as Divider } from './DividerComponent/Divider.component'; // 修正拼写错误：Devider → Divider
export { default as Dropdown } from './Dropdown/Dropdown.component';
export { default as GeneralText } from './GeneralTextComponent/GeneralText.component';
export { default as IconButton } from './IconButton/IconButton.component';
export { default as InputDate } from './InputDate/InputDate.component';
export { default as InputText } from './InputText/InputText.component';
export { default as Toggle } from './ToggleComponent/Toggle.component';
export { default as Svg } from './Svg/Svg.component';

这种写法直接将每个组件的默认导出转为命名导出，完全匹配你MockComponents.js中的import { Button } from './Components'写法，同时修正了你原代码中Devider的拼写错误（应为Divider），避免后续使用时出现混淆。

方法二：修改导入方式（不推荐） #

如果不想改动index.js，可以将导入改为默认导入后解构对象：

import React from 'react'
import Components from './Components'
const { Button } = Components

const MockComponents = () => {
  return (
    <div>
        <Button/>
    </div>
  )
}

export default MockComponents

或者直接在导入时解构：

import React from 'react'
import { default as Components } from './Components'
const { Button } = Components

这种方式虽然能解决问题，但不符合React项目组件导入的常规习惯，代码可读性较差，因此更推荐第一种方法。

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