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

Question

okay so if I have one react component I can:

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

Now I have a file called About.js where I am exporting multiple components as they're related.

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

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

in my App.js

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

All works, however, react dev-tools says the components above are <Unknown/>

What is best practice to export multiples components from a file avoiding the <Unknown/> output?

Solution Thanks to @Khun on comments bellow

About.js

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

export {Staff, Employee}

in my App.js

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

That removed the <Unknown/> from react dev tools.

Ps: I understand the discrepancy on best practice, however, this did resolve my question above.

Answer 1

First, create each components in a different file: Staff.js and Employee.js. Export them like this: export { Staff }; and export { Employee };

Now create another file to handle multiple exports. Let's call it About.js and here is the content:

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

Now just use it as you did:

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