Mithril.js複数のCSSクラス

Question

私はmithril.jsを新しくしました。私はdivを持っていますが、ctrl.invalid（）== trueの場合はクラス "invalid"を追加し、ctrl.hidden（）の場合は "hidden" == trueを追加します。

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

あなたのミスリルのコンポーネントにヘルパーメソッドを追加することができます。

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() }); 
    }, 
}; 

は、より良いあなたのケースに合った方を選択してください。彼の答えにロス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() }); 
    }, 
};