class="example" 与 Ember/handlebars 组件中的 classNames="example" 有什么区别？

Question

我正在将 class 应用到一个组件，看起来这两个选项都有效：

1. {{example-component class="example-class"}}

2. {{example-component classNames="example-class"}}

两者最终都会导致呈现的 HTML 具有 class，例如：

<div class="example-class ember-view">...</div>

通过 class 或 classNames 提供 class 有区别吗？使用一个而不是另一个会有任何意想不到的后果吗？

Answer 1

除了 class 应该是一个字符串而 classNames 应该是一个字符串数组之外，没有什么重要区别。

如果您在 .hbs 的调用时传递 class，我建议您像第一个示例一样使用 class 属性，因为这与您指定class 对于常规 HTML 元素。

属性 class名称可以在 .js 文件中使用。 IE。我经常使用这样的模式：

// my-small-button.js
import Component from '@ember/component';

export default Component.extend({
  classNames: ['my-button', 'small']
});

调用组件：

{{my-small-button class="red"}}

结果-html:

<div class="my-button small red">
</div