Mithril.js 多个 css class

Question

我是 mithril.js 的新人。我有一个 div，如果 ctrl.invalid()==true，我想添加 class "invalid"，如果 ctrl.hidden()=，我想添加 "hidden" =真。

如果我使用 m('div', {class: ctrl.invalid() ? 'invalid' : '', class: ctrl.hidden()? 'hidden' : ''})，它们会相互覆盖。

我可以使用 m('div', {class: [ctrl.invalid()?'invalid':'', ctrl.focused()?'focused':''].join(' ')})，它会工作，但它看起来很乱。

有没有优雅的解决方案？谢谢。

Answer 1

我建议您使用 classnames - 一个简单的实用程序。您可以以一种很好的方式定义类，它会为您合并所有内容。在你的情况下它将是：

const myMergedClasses = classNames({
    invalid: ctrl.invalid(), 
    focused: ctrl.focused()
});
m('div', { class: myMergedClasses })

漂亮吗？！

Answer 2

您可以向您的 Mithril 组件添加辅助方法：

const myComponent = {
    css() {
        // Add some logic

        return 'class1 class2';
    },
    view() {
        return m('div', { class: this.css() });
    },
};

或控制器：

const ctrl = {
    css() {
        // Add some logic

        return 'class3';
    },
};

const myComponent = {
    view() {
        return m('div', { class: ctrl.css() });
    },
};

选择更适合您的情况。

您也可以使用类名实用程序，正如 Ross Khanas 在他的回答中所建议的那样：

const myComponent = {
    css() {
        return classNames({
            invalid: ctrl.invalid(), 
            focused: ctrl.focused(),
        });
    },
    view() {
        return m('div', { class: this.css() });
    },
};

或者：

const ctrl = {
    css() {
        return classNames({
            invalid: this.invalid(), 
            focused: this.focused(),
        });
    },
    invalid() { /* ... */ },
    focused() { /* ... */ },
};

const myComponent = {
    view() {
        return m('div', { class: ctrl.css() });
    },
};

Answer 3

游戏已经很晚了，但作为对其他人在这里结束的灵感，我经常做类似下面的事情，只是因为它是：

易于实施
易于扩展
通俗易懂

view(): {
    const classes = 
        `${ctrl.invalid() ? '.invalid' : ''}` +
        `${ctrl.hidden()? '.hidden' : ''}`;
    return m(`div${classes}`);
}

Mithril.js 多个 css class

Mithril.js multiple css class

mithril.js