Javascript 两个三元运算符扩展为一个内联样式，给出'；未能编译'；错误

我尝试在一行中使用两个三元运算符作为样式元素内联。这是我试图传递的代码：

style={{ ...display: mode === "single" ? "none" : "block",
         ...display: gradientSelected === 'radial' ? "block" : "none" }}

“模式”和“梯度选择”是状态，这些是状态：

const [gradientSelected, setGradientSelected] = useState("linear")
const [mode, setMode] = useState("single")

知道我为什么会犯这个错误吗

在一行中使用两个三元运算符有更好的方法吗

---

还有，在一个三元函数中有两个条件吗？在我的示例中，

如果mode===single，gradientSelected===linear，display none

如果要展开一个对象，它首先需要是一个对象：

const mode=“single”；
const gradientSelected=“foo”；
常量样式={
…{display:mode===“single”？“none”：“block”}，
…{display:gradientSelected=='radial'？“block”：“none”}
};
console.log（风格）排列运算符“…”用于值，您将其放在键名之前。这不是有效的语法。你能解释一下你所期望的逻辑吗？三元条件的工作原理与其他条件相同<代码>真和真？&true？“这个“：”不是那个“

，所以是的，在三元条件中可以有任意多个条件。一是检查“模式”状态是否为“单一”，如果是，则显示无。尽管如此，如果其“渐变”，则显示块。现在，一旦它是渐变模式，如果gradientSelected是线性的，则显示none，如果它是径向的，则显示块。这就是我想要实现的，您也可以嵌套三元操作：

false？“不是这个“：（错？也不是这个“：“这个”）

但它的可读性不好。@我们的赞助人-诚恳地说，他必须在两年后维护你的代码，因为没有代码审查。这很有效！尽管如此，这是最佳实践吗？有更好的方法吗？所以问题是第一个三元基本上是无用的，它总是会被第二个三元覆盖。我想你真正想要的是把两个变量合并成一个三元数。我添加了一个额外的例子，可能有助于你更接近你的目标，即在一个三元运算符中使用两个条件。你的第二个例子很有魅力！虽然，使用&&运算符的完全相同的代码不起作用，你知道为什么吗？具体如下：“显示：模式==”单个“&&gradientSelected==”线性“？”无“：”块“，”