如何集中导出connect、Component与函数？模块导出报错排查

你的报错 expected a string (for built-in components) or a class/function (for composite components) but got: undefined，核心原因是DrawerItems和ToggleDrawer的导出方式错误，导致你通过命名导入拿到的是undefined，React无法渲染一个无效的undefined内容。

让我们逐个拆解问题：

1. 正常工作的组件：DrawerItem #

你的DrawerItem使用了命名导出：

export { drawer_component as DrawerItem };

在drawer/index.jsx里的export * from './drawer_item';会正确捕获这个命名导出，所以主文件里的import { DrawerItem }能拿到正确的组件，这部分逻辑完全没问题。

2. 引发错误的组件：DrawerItems & ToggleDrawer #

你对这两个组件的导出写法存在关键错误：

// DrawerItems的错误导出
export default { DrawerItems };
// ToggleDrawer的错误导出
export default { ToggleDrawer };

这里你把组件包裹在一个对象里作为default导出，但export * from './xxx'只会导出模块中的命名导出，不会处理default导出。同时，即便你改用default导入，拿到的也是一个包含组件的对象，而不是组件本身——React需要的是类/函数组件，不是包裹它的对象。

修复方案 #

你有两种正确的选择：

方案一：改用命名导出（推荐，和DrawerItem保持风格一致）

修改DrawerItems的代码：

class DrawerItems extends PureComponent {
  // ...组件逻辑
}
export { DrawerItems }; // 去掉default，使用命名导出

修改ToggleDrawer的代码：

class ToggleDrawer extends React.PureComponent {
  // ...组件逻辑
}
export { ToggleDrawer }; // 去掉default，使用命名导出

这样drawer/index.jsx里的export *就能正确收集这两个命名导出，主文件的import { DrawerItems, ToggleDrawer }就能拿到正确的组件。

方案二：调整index.jsx的导出逻辑（适配现有default导出）

如果你不想修改组件文件的导出方式，可以手动在drawer/index.jsx里处理default导出：

export * from './drawer_header';
export * from './drawer_item';
export * from './drawer_items';
export * from './drawer';

// 手动导入并重新命名导出ToggleDrawer
import ToggleDrawer from './toggle_drawer';
export { ToggleDrawer };

// 手动导入并重新命名导出DrawerItems
import DrawerItems from './drawer_items';
export { DrawerItems };

不过这种方式会打破代码风格的一致性，建议优先选择方案一。

错误根源总结 #

React报错是因为你尝试渲染的DrawerItems或ToggleDrawer是undefined——你的命名导入找不到对应的命名导出，而这两个组件的default导出是对象，不是组件本身，最终导致React拿到了无效的渲染内容。

内容的提问来源于stack exchange，提问作者merry-go-round