用三元反應內聯樣式

Question

有一個像這樣的 Checkbox 元素：

<Checkbox
    checked={this.props.someValues.indexOf(myValue) > -1}
/>

當該索引具有正值時，復選框將被選中。

我想在復選框中添加不同的 colors，例如，如果它未選中 - 藍色，選中 - 紅色。

所以我試着這樣做：

<Checkbox
   checked={this.props.someValues.indexOf(myValue) > -1}
   {(this.props.someValues.indexOf(myValue) > -1) ? style={{ color: 'red' }} : style={{ color: 'blue' }}}
   />

但它不起作用。

另一個嘗試：

<Checkbox
   checked={this.props.someValues.indexOf(myValue) > -1}
   style={(this.props.someValues.indexOf(myValue) > -1) ? {{ color: 'red' }} : {{ color: 'blue' }} }
   />

是否可以使用三元運算符設置內聯樣式，但我做錯了，還是應該嘗試不同的方式？

Answer 1

我可能會做的是將生成值的 function 分開。 即使三元運算符適用於這種情況，也可能以這種方式使代碼不那么可讀。

我會嘗試：

<Checkbox checked={this.props.someValues.indexOf(myValue) > -1}
          style={getStyle()} />

並為此創建一個 function：

const getStyle = () => {
   return {
      color: this.props.someValues.indexOf(myValue) > -1 ? 'red' : 'blue'
   }
}

所以你仍然可以保留你的三元運算符，但以一種更易讀的方式。

我希望這有幫助！

Answer 2

您的第二次嘗試只是不起作用，因為其中的{}太多。 請記住，屬性值周圍的外部{}用於分隔 JSX 表達式； 表達式的內容只是 JavaScript，所以 object 只使用一對{} 。

但我不會創建單獨的對象（盡管這很好），我只是切換值：

      v−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−v−− JSX expression delimiters
style={{color: this.props.someValues.indexOf(myValue) > -1 ? 'red' : 'blue' }}
       ^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−− Object literal delimiters

但為了完整起見，您的第二次嘗試更正如下所示：

      v−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−v−− JSX expression delimiters
style={this.props.someValues.indexOf(myValue) > -1 ? { color: 'red' } : { color: 'blue' } }
                                                     ^−−−−−−−−−−−−−−^−−−^−−−−−−−−−−−−−−−^−−−− Object literal delimiters

......這樣也很好。