停止过度思考您的共享组件！
停止过度思考您的共享组件！
我最近加入了一家新公司，我发现自己（很多）为他们的共享组件库做出了贡献。我很早就被要求创建一个组件。起初我觉得这有点令人生畏。怎么可能接近这个？有问题的组件是面包屑。
我不确定我可以采取的方法。我是新人，我想给人留下深刻印象，所以，当然，我过度设计了它。我不禁觉得我可以简化它。
现在，你可能在想——“你的意思是什么？”。嗯，面包屑数据可能来自异步 API 调用，或者一些花哨的路由逻辑（我最初的想法）。但是组件不应该关心这一点。这一切都应该发生在应用程序级别。
我的做法：
我开始制作一个 面包屑 零件：
从“反应”导入反应；
从“./breadcrumbs.module.css”导入样式； 导出类型 BreadcrumbItem = {
标题：字符串；
网址：字符串；
禁用：布尔值；
}; 输入面包屑 = {
面包屑：面包屑项[]；
}; 常量 BreadCrumbItem = ({
标题，
网址，
禁用，
}: BreadcrumbItem): JSX.Element => {
返回 （
<li className={styles.BreadcrumbItem}>
{禁用？ (
标题
) : (
<a href={url} className={styles.BreadcrumbItemAnchor}>
{标题}
</a>
)}
<span className={styles.BreadcrumbItemArrow}>></span>
</li>
);
}; 常量面包屑=（{面包屑}：面包屑）：JSX.Element => {
返回 （
<ol className={styles.BreadcrumbContainer}>
{面包屑
?面包屑.map（（面包屑，索引）=>（
<BreadCrumbItem
标题={面包屑.title}
url={面包屑.url}
禁用={breadcrumb.disabled}
/>
))
： 无效的}
</ol>
);
}; 导出默认面包屑；
这段代码很简单，没什么可怕的；让我们来看看它。这只是一个名为的反应组件 <Breadcrumbs /> 它接受一系列面包屑项目。这就是字面意思。它映射数组并返回另一个名为 <BreadcrumbItem /> 它接受单个面包屑项目。这样做是为了简单地清理我的代码，而不是返回一大堆 JSX。
我们现在可以像这样使用组件：
从“../components/breadcrumbs/breadcrumbs”导入面包屑；
从“../components/breadcrumbs/breadcrumb.mock”导入{面包屑MockData}； 常量首页 = () => {
返回<Breadcrumbs breadcrumbs={breadrumbMockData} />;
}; 导出默认主页；
我只是将一组模拟数据传递给组件，这些数据表示从父级到组件的各个面包屑。在现实生活中的应用程序中，这可能来自某种 API。无论哪种方式，这一切都发生在应用程序中； 组件外 .
这是结果（带有一些 CSS 魔法）：
这是我在 Medium 上的第一篇博文，所以我一直保持简短和甜蜜。这也是我有史以来的第一篇博客文章，所以我真的希望你喜欢这篇文章，并且它在未来对你有所帮助！感谢您的光临！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
