React - 如何在同一文件上导出多个组件，防止Dev Tools上的<unknown>组件

Question

好吧，如果我有一个反应成分，我可以：

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

现在我有一个名为About.js的文件，我将导出多个组件，因为它们相关。

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

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

在我的App.js

中

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

然而，所有的工作都反应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";