如何在根组件中设置多个 class 变量

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>

参考文献:

How to set muliple class variables in riot component