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

我可能要做的是将其分离为一个生成值的函数。即使三元运算符在这种情况下是好的，也可能使这种方式的代码不那么可读。

我会尝试：

<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

...那也很好。

用三元反应内联样式

2 个答案: