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

Question

好吧，如果我有一个 react 组件，我可以:

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/>来自 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";