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.
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";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.