React - 如何在同一文件上导出多个组件，防止<Unknown/>开发工具上的组件

Question

好吧，如果我有一个反应组件，我可以：

const Home = () => (....)
export default Home;

现在我有一个名为About.js的文件，我在其中导出多个相关的组件。

export const Staff = () => (...)

export const Employee = () => (...)

在我的 App.js 中

import { Staff, Employee } from "./components/About";

然而，所有的工作，react dev-tools 说上面的组件是<Unknown/>

从避免<Unknown/>输出的文件中导出多个组件的最佳实践是什么？

解决方案感谢@Khun 对下面的评论

About.js

const Staff = () => (...)
const Employee = () => (...)

export {Staff, Employee}

in my App.js

    import { Staff, Employee } from "./components/About";

这从反应开发工具中删除了<Unknown/> 。

Ps：我理解最佳实践的差异，但是，这确实解决了我上面的问题。

Answer 1

首先，在不同的文件中创建每个组件：Staff.js 和 Employee.js。 像这样导出它们： export { Staff }; 并export { Employee };

现在创建另一个文件来处理多个导出。 让我们称之为 About.js，这里是内容：

export * from './Staff';
export * from './Employee';

现在就像你一样使用它：

import { Staff, Employee } from "./components/About";