Javascript 使用三元代码反应内联样式

具有如下复选框元素：

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

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

-1}
/>

当该索引具有正值时，复选框将被选中

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

所以我试着这样做：

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

-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' }} }
   />

-1}
style={（this.props.someValues.indexOf（myValue）>-1）？{{color:'red'}}:{{color:'blue'}}}
/>

---

是否可以使用三元运算符内联设置样式，但我做得不对，还是应该尝试另一种方法？

我可能会做的是将其分离到一个生成值的函数中。即使三元运算符适合这种情况，也可能会使代码不那么可读

我会尽量做到：

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

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

---

我希望这有帮助

您的第二次尝试无效，因为您有太多的

{}

。请记住，属性值周围的外部

{}

用于分隔JSX表达式；表达式的内容只是JavaScript，因此对象只使用一对

{}

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

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

但为了完整起见，您的第二次尝试如下所示：

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

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

…这样也很好