用三元反应内联样式答案

【问题标题】：React inline style with ternary用三元反应内联样式
【发布时间】：2020-09-05 16:23:07
【问题描述】：

有一个像这样的 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' }} }
   />

是否可以使用三元运算符内联设置样式，但我做错了，还是应该尝试不同的方式？

【问题讨论】：

标签： javascript reactjs checkbox inline ternary

【解决方案1】：

您的第二次尝试不起作用，因为您的{} 太多。请记住，属性值周围的外部{} 用于分隔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】：

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

我会尝试：

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

并为此创建一个函数：

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

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

我希望这会有所帮助！

【讨论】：