创建两个组件"mix"的组件(从 2 个组件扩展)



我正在构建一组组件,这些组件的行为可能存在变体。

更具体地说,我有一个x-tag组件,它可以表现为简单地渲染文本的<span>,也可以表现为同时渲染文本并链接到另一个路由的<a>

对于"链接"部分,我使用Ember提供的链接组件(即link-to(,而不是自己重新实现所有路由逻辑。

理想的是只有两个组件:

  • x-tag,处理基本逻辑的简单文本版本
  • x-tag-link-to、链路版本,其应当是从link-tox-tag组件扩展而来的组件

由于不能从两个组件进行扩展,所以我将x-tag组件中的逻辑移动到了tagmixin中。所以组件最终是这样的:

  • x-tag,实现tagmixin的组件
  • x-tag-link-to组件,扩展了link-to组件并实现了tagmixin

这解决了问题,但将逻辑放在几个文件中是令人困惑的,而且我有更多的组件,比如标签,也有链接版本,用很多几乎具有整个组件逻辑的mixin填充mixin文件夹这感觉不对,还是这是正确的方法?

如果需要,我可以提供代码示例。

正如Gennady Dogaev在评论中所说,我最终使用了mixin。

结果是:

  • mixins/components/x-tag:具有标记组件逻辑
  • components/x-tag:实现mixin的空组件
  • components/x-tag-link-to:link-to组件扩展以实现mixin

我放弃了组合,尽管这似乎是正确的路径,但从长远来看,将内部组件的实现映射到包含组件将是一场噩梦。

最新更新