更改元素的类名无法正常工作

Question

我想通过切换类名来改变元素的颜色，而类名没有改变。

我目前正在使用 nextJS 和 mobX。

这是示例代码：

例子.tsx

<div 
  className = {store.isChosen ? 'isChosen' : 'isNotChosen'}
  onClick={()=>{
    store.isChosen = !store.isChosen;
  }}
>ELEMENT</div>

// this doesn't work either
<div 
  className = {store.isChosen ? `{styles.isChosen}` : {styles.isNotChosen}`}
  onClick={()=>{
    store.isChosen = !store.isChosen;
  }}
>ELEMENT</div>

例子商店.ts

@observable
isChosen:boolean = false;

例子.module.scss

.isChosen{
  background-color: red;
}

.isNotChosen{
  background-color: blue;
}

Answer 1

Mobx 中的observable ，顾名思义，就是观察任何可能影响它的变化，这就是为什么当你将值设置为新的东西时，它会直接反映出来。 您甚至可以创建一个可观察的 object 并更新其中的值，例如： myState.stateKey = "new Value"并且由于Proxy ，它也可以工作。

我邀请您阅读文档以获取更多信息。