Javascript 三元运算符不使用React[HOOK]的内联样式

基本上，我有一个状态是真是假。状态名称为DisplayFirstColorPicker。如果为true，我希望内联样式为const'showColorPicker'，如果为false，则应为const'hideColorPicker'

然而，当我运行内联三元运算符时，我得到一个“编译失败”错误

知道怎么了吗

内联代码：

声明：

  const [displayFirstColorPicker, setDisplayFirstColorPicker] = useState(false)

内联代码

<div class="firstColorPicker" style={{DisplayFirstColorPicker ? {showColorPicker} : {hideColorPicker}}}>

---

你在这里做各种奇怪的事情。外部的大括号太多，也不应该使用像

{showColorPicker}

这样的对象简写符号，它将编译为

{showColorPicker:{display:none}

---

style={DisplayFirstColorPicker？showColorPicker:hideColorPicker}

应该可以做到这一点。

对不起，我还在习惯JSX。一直忘了，一旦我在花括号中，我就可以自由地编写JS，而且我不必把每个常量都用花括号包装。是的，里面是直接的javascript：）所以如果没有更多的样式，有些人可能会做

style={{{display:DisplayFirstColorPicker？'block'：'none'}

const showColorPicker = {
    display: "block",
  }

  const hideColorPicker = {
    display: "none",
  }