反应式内联样式与三元组

Question

有一个这样的Checkbox元素。

<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

你的第二次尝试只是因为你有太多的 {} 在其中。记住，外 {} 围绕着属性值是为了限定一个JAX表达式；表达式的内容只是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

...这种方式也很好.

Answer 2

我可能会做的是分离成一个生成值的函数。即使三元运算符在这种情况下是好的，但这样做可能会使代码不那么可读。

我会尝试用as。

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

并创建一个函数来实现这个目的。

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

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

我希望这对你有帮助