项目结构问题

我正在我的 React 电商应用中面临一个架构挑战，我很希望得到一些社区的见解。我纯粹为了教育目的而构建了这个项目，最近我决定重构我的项目，使其具有更好的结构。 ** 设置 ** 我遵循了 react-bulletproof 架构原则，并采用了严格的文件结构： * /src/components - 共享 UI 组件 * /src/features - 特定领域的功能（购物车，愿望清单等） * /src/hooks - 应用范围内的自定义钩子 * /src/pages - 可以从任何地方导入的页面组件 ** 问题 ** 我有可重用的 UI 组件（ProductCard，CarouselCard），需要愿望清单功能。愿望清单逻辑位于 /src/features/wishlist 中，包括： * RTK 查询 API 端点 * 自定义钩子（useToggleWishlist） * Redux 状态管理 根据架构原则，组件不应从功能中导入，但我的组件需要功能。 ** 我正在考虑的选项 ** 属性钻取：通过组件层次结构传递愿望清单处理程序（感觉麻烦） * 移动逻辑：将愿望清单 API/钩子迁移到通用位置，例如 API 迁移到 /src/lib/api，钩子迁移到 /src/hooks，但此时我必须将业务逻辑放入共享组件。 ** 问题 ** 我实现了属性钻取，但它很快变得不方便。例如，在我的分类页面结构中： CategoryPage └─ Subcategory └─ProductSection └─ Carousel └─ CarouselCard（需要愿望清单切换） 我必须在 CategoryPage 级别定义切换愿望清单函数，并通过四个组件层次传递它，仅以达到 CarouselCard。这种方法感觉很混乱，尤其是随着应用的增长。将逻辑放入共享组件（/src/components/ui）也感觉不太对。此外，我可能需要 CarouselCard 中的另一个功能，即 addToCart，相关钩子位于 /src/features/cart 中，因此在愿望清单功能下创建一个已填充的 CarouselCard 并不起作用。 感谢您就如何解决这个问题提供任何建议！