Reactjs 反应-如何在同一文件中导出多个组件，防止<；未知/>；开发工具上的组件

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

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

现在我有了一个名为

About.js

的文件，我在其中导出多个相关组件

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

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

在我的App.js中

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

然而，react dev tools表示，上面的组件都是

从文件中导出多个组件以避免

输出的最佳做法是什么

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

About.js

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

export {Staff, Employee}

in my App.js

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

从react dev工具中删除了

---

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

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

Export{Staff}和
导出{Employee}

现在创建另一个文件来处理多个导出。我们将其命名为About.js，内容如下：

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

现在只需像使用一样使用它：

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

老实说，最好的做法是每个文件只实现一个组件。我想知道是否有一种方法可以将两个组件结合起来，直到您需要从同一个文件导出多个组件，这将有助于@Jayavel，谢谢！所以每个组件都有不同的文件，这是唯一的方法？如果您希望代码能够扩展并可维护，这是您最好的选择。@NullisTrue当然您仍然可以在同一个文件中使用它，但不推荐使用！只需创建所有类并在底部导出它们。出口{员工，雇员]；收到。谢谢大家！