Mithril.js多css类

Question

我是mithril.js的新手。我有一个div，我想添加类“无效”如果ctrl.invalid()==true，和“隐藏”如果ctrl.hidden()==true。

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

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

有一个优雅的解决方案吗？谢谢。

Answer 1

我建议您使用类名 --这是一个简单的实用程序。您可以很好地定义您的类，它将为您合并所有内容。就你而言，情况将是：

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

很漂亮？！

Answer 2

游戏很晚了，但作为对其他人的灵感，我经常做以下的事情，仅仅因为它是：

• 易于实现
• 易于扩展
• 易懂

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

Answer 3

您可以将助手方法添加到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() });
    },
};