文章/答案/技术大牛

发布

社区首页 >问答首页 >React如何在同一文件上导出多个组件，防止开发工具上的<未知/>组件

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

Stack Overflow用户

提问于 2018-02-05 22:40:20

回答 1查看 10.8K关注 0票数 6

好的，如果我有一个反应元件，我可以：

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

现在，我有了一个名为About.js的文件，在该文件中，我导出多个组件，因为它们是相关的。

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

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

在我的App.js里

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

所有的工作，然而，反应开发工具说，上面的组件是<Unknown/>。

从避免<Unknown/>输出的文件中导出多个组件的最佳实践是什么？

解决方案感谢@Khun在评论中

About.js

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

export {Staff, Employee}

in my App.js

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

它从react工具中删除了<Unknown/>。

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

reactjs

回答 1

Stack Overflow用户

发布于 2018-02-05 23:42:54

首先，在不同的文件中创建每个组件: Staff.js和Employee.js。按如下方式导出：export { Staff };和export { Employee };

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

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

现在就像你做的那样使用它：

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

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48632668

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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