Question

参考Ionic button component的文档，我看到该组件呈现了<Host>，然后呈现了<TagType>内部。我想知道背后的原因是什么。

例如，为什么不仅渲染<TagType>？

关于这个问题，我还看到所有类都附加到<Host>，而不是<TagType>。我也想知道背后的原因是什么。为什么不将类直接添加到<TagType>呢？

这是离子按钮组件的tsx：

return (
      <Host
        onClick={this.handleClick}
        aria-disabled={disabled ? 'true' : null}
        class={{
          ...createColorClasses(color),
          [mode]: true,
          [buttonType]: true,
          [`${buttonType}-${expand}`]: expand !== undefined,
          [`${buttonType}-${finalSize}`]: finalSize !== undefined,
          [`${buttonType}-${shape}`]: shape !== undefined,
          [`${buttonType}-${fill}`]: true,
          [`${buttonType}-strong`]: strong,

          'button-has-icon-only': hasIconOnly,
          'button-disabled': disabled,
          'ion-activatable': true,
          'ion-focusable': true,
        }}
      >
        <TagType
          {...attrs}
          class="button-native"
          disabled={disabled}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
        >
          <span class="button-inner">
            <slot name="icon-only"></slot>
            <slot name="start"></slot>
            <slot></slot>
            <slot name="end"></slot>
          </span>
          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
        </TagType>
      </Host>
    );

，这就是它的呈现方式：

<ion-button size="small" class="ios button button-small button-solid ion-activatable ion-focusable hydrated">Default</ion-button>

#shadow-root

<button type="button" class="button-native">
    <span class="button-inner">
        <slot name="icon-only"></slot>
        <slot name="start"></slot>
        <slot></slot>
        <slot name="end"></slot>
    </span>
</button>

如您所见，这些类插入到主机（离子按钮）上，而不是插入<TagType>上。我想了解这一决定的好处。

此外，我想了解在<span class="button-inner">（按钮）中包含<TagType>的原因是什么？为什么不将<slot></slot>直接扔到<TagType>中呢？

我是Stencil和Ionic的新手，并且我非常渴望了解构建组件的最佳方法。因此，如果有人能帮助我理解这一决定背后的原因，我将不胜感激！

Answer 1

Host用于在自身的ion-button上添加类，事件侦听器和属性，而不添加组件的任何嵌套DOM。这是因为在进行类绑定之类的操作时，我们只真正关心元素本身，而不关心组件的内部。使用跨组件通信和影子DOM，在这种情况下无法获得对TageType之类的内部引用。

该广告位的原因是要处理浏览器在文本/样式应用于按钮方面的差异。在Ionic，对于我们来说，更多的是内部知识，而不是其他人需要了解的事情。

为什么Ionic组件呈现<Host>，然后呈现内部<TagType>，而不是呈现<TagType>？

1 个答案: