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

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/