如何在React组件中条件式添加属性（含样式属性）

你原来的写法不符合JS对象字面量的语法规则，不能直接在对象内部用三目运算符返回独立的键值对表达式，正确实现方式如下：

方法1：展开条件对象（完全匹配你原逻辑） #

把条件分支的返回内容包裹为独立对象再用展开运算符合并，写法如下：

const FULL: React.CSSProperties = {
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
}

return <div style={{
  ...FULL,
  ...(screenMinimized ? { overflow: 'auto' } : { display: 'none' })
}}>

原理：条件判断的结果始终是一个合法对象，展开运算符会把这个对象的属性合并到最终的style对象中。当screenMinimized为true时新增overflow: auto属性，为false时覆盖FULL里原有的display属性为none，和你最初想实现的逻辑完全一致。

方法2：仅条件成立时新增属性（不覆盖原有属性） #

如果你只需要在条件满足时加属性，条件不满足时不修改FULL的原有属性，可以用短路写法：

return <div style={{
  ...FULL,
  // 只有screenMinimized为true时才会添加overflow属性，否则无任何改动
  ...(screenMinimized && { overflow: 'auto' })
}}>

注意事项 #

• 后续合并的属性会覆盖前面FULL对象里的同名属性，遵循对象字面量「后写优先」的规则
• 条件分支必须返回标准对象，不能直接返回键值对表达式，否则会触发语法错误

内容的提问来源于stack exchange，提问作者Mehmet Yener Yilmaz