时间戳

首页 > 解决方案 > 为什么 Ionic 组件会渲染然后在里面，, 而不是仅仅渲染?

ionic-framework - 为什么 Ionic 组件会渲染然后在里面，, 而不是仅仅渲染?

问题描述

参考Ionic 按钮组件的文档，我看到该组件呈现<Host>，然后在<TagType>. 我想知道背后的原因是什么。

例如，为什么不只渲染<TagType>?

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

这是 Ionic 按钮组件的 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>. 我想了解这个决定背后的好处。

另外，我想了解在(button)<span class="button-inner">内部有一个的原因是什么？<TagType>为什么不<slot></slot>直接扔进<TagType>去呢？

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

标签： ionic-frameworkweb-component

解决方案

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

插槽的原因是处理跨浏览器在如何为按钮应用文本/样式方面的差异。Ionic 为我们提供了更多内部知识，而不是其他人需要知道的事情。

推荐阅读