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/>from react 开发工具。

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";