React中给JSX input加条件checked属性报错要求用扩展运算符的原因

错误原因 #

• JSX 不支持将表达式直接裸写在标签的属性声明位置，你代码里的 {activeModal?"checked":""} 属于不符合语法规范的写法，编译器会默认将标签内大括号包裹的独立内容识别为待展开的属性对象，因此抛出需要扩展运算符 ... 的错误。
• 你混淆了原生 HTML 和 JSX 的属性书写规则：原生 HTML 中单选/复选框的选中态需要写 checked="checked" 声明，但 JSX 中布尔属性直接接受布尔值作为入参，值为 true 时属性自动生效，值为 false 时属性自动忽略，不需要手动返回属性名字符串。

修复方案 #

方案1（最简洁，推荐） #

直接给 checked 属性绑定布尔值即可：

<input 
  name="radio-size" 
  value="small" 
  type="radio" 
  id="small" 
  checked={activeModal}
  className="modal-content-sizes-form-option"
/>

方案2（动态控制多属性场景可用） #

如果需要通过动态计算决定是否插入某个属性，可以将属性包装为对象后用扩展运算符展开：

<input 
  name="radio-size" 
  value="small" 
  type="radio" 
  id="small" 
  {...(activeModal ? {checked: true} : {})}
  className="modal-content-sizes-form-option"
/>

内容的提问来源于stack exchange，提问作者aspiringdev