javascript - 如何在根组件中设置多个类变量

Question

我用 riot.js 制作了一个页眉组件，它在某些页面上应该有不同的样式。我想在 html 文档中安装标签时设置类，但不知道如何设置。标签看起来像这样:

<o-header>
    <header class={ opts.structure, opts.overflow, opts.color }>
    ...
    </header>
</o-header>

这是安装:

riot.mount('o-header',
{
    structure: 'o-header',
    overflow: 's-overflow--hidden',
    color: 'm-header--navy',
})

这是语法错误还是我滥用了此处的 opts 功能？

Answer 1

这是一个有趣的选项用例。

提供多个动态类的格式如下，

<o-header>
  <header class="{opts.structure} {opts.overflow} {opts.color}">
  ...
  </header>
</o-header>

更进一步，您可以将此语法应用于条件类，

<o-header>
  <header class="{true ? opts.structure: ''} {true ? opts.color : ''}">
  ...
  </header>
</o-header>

---

引用资料:

JSFiddle:https://jsfiddle.net/31bokmyx/

RiotJS 问题:https://github.com/riot/riot/issues/2073

条件动态类 JSFiddle:https://jsfiddle.net/31bokmyx/19/