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/> 。

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