用三元反应内联样式

Question

有一个这样的复选框元素：

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

当该索引为正值时，复选框将被选中。

我想为复选框添加不同的颜色，例如，如果未选中 - 蓝色，选中 - 红色。

所以我试着这样做：

<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

我可能会做的是分离成一个生成值的函数。即使三元运算符适用于这种情况，也可能使代码无法以这种方式阅读。

我会尝试：

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

并为此创建一个函数：

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

所以你仍然可以保留你的三元运算符，但以一种更易读的方式。

希望对您有所帮助！

Answer 2

您的第二次尝试仅无效，因为您的 {} 太多了。请记住，属性值周围的外部 {} 用于分隔 JSX 表达式；表达式的内容只是 JavaScript，所以一个对象只使用一对 {}.

但我不会创建单独的对象（虽然这很好），我只是切换出值：

      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

...这样也可以。

用三元反应内联样式

React inline style with ternary

javascript

checkbox

inline

ternary

reactjs