编写状态相关的内联CSS“样式”的正确方法是什么？

Question

我正在尝试根据当前状态更改按钮的样式。

以下是我当前的尝试：

<Button
    id="1W"
    size="sm"
    style={[this.state.timeSpan === '1W' ? btnActive : btnInactive]}
    onClick={this.handleSpan} 
>

最初我遇到此错误->

  

“ TypeError：CSS2Properties没有针对的索引属性设置器   '0'“。

我不知道该怎么解决。

现在该页面根本无法加载。

我的语法有问题吗？还是有一种更好的整体方法来实现我的目标？

Answer 1

我想说，更改元素的类是首选方法：

<button 
  className={this.state.timeSpan == '1W' ? 'btnActive' : 'btnInactive'}
  ...>

这样，表示就尽可能与逻辑分离。

---

如果样式是在运行时生成的，则可以设置style：

  ...
  style={this.state.timeSpan == '1W' ? btnActive : btnInactive}

（假设btnActive是诸如{color: 'rgb(1,2,3)'}之类的对象）

Answer 2

这不是您编写CSS的方式，也不是正确的语法：

style={[this.state.timeSpan === '1W' ? btnActive : btnInactive]}

如果它是带有道具的物体，那么您可能会做的是

style={(this.state.timeSpan === '1W' ? {...btnActive} : {...btnInactive})}

或者，如果是类名：

className={(this.state.timeSpan === '1W' ? btnActive : btnInactive)}