Question

我是mithril.js的新人。我有一个div，如果ctrl.invalid（）== true，我想添加类“invalid”，如果ctrl.hidden（）== true，我想添加“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() });
    },
};

选择更适合您案例的人。

你也可以使用classnames实用程序，正如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() });
    },
};

Mithril.js多个css类

2 个答案: