React：根据isRequired props设置input的required属性报错原因解析

报错原因 #

你尝试的两种写法不符合JSX的属性语法规则：

• 写法1：<input {isRequired && 'required'} />
• 写法2：<input {isRequired ? 'required' : ''} />

JSX对元素属性的写法有严格要求：要么是静态属性（比如直接写required），要么是动态键值对（比如required={isRequired}），要么用展开语法（{...propsObject}）批量传递属性。

你直接把表达式放在属性位置（没有属性名），JSX解析器无法识别这种语法，会认为是非法的 token，所以抛出「Unexpected token, expected "..."」错误——它要么期待你写属性名+值，要么用...开头的展开语法。

另外，就算你改成required={isRequired && 'required'}，这种写法也不符合React对布尔属性的处理逻辑：当isRequired为true时，传递的字符串'required'会被React视为true，虽能生效但不规范；当isRequired为false时，空字符串''会被视为false，同样不是正确的处理方式，还容易造成逻辑混淆。

正确写法的生效原理 #

{...(isRequired ? { required: true } : {})} 是利用了JSX的属性展开语法，核心逻辑如下：

1. 三元表达式判断isRequired的值：
   • 当isRequired为true时，返回对象{ required: true }
   • 当isRequired为false时，返回空对象{}
2. 通过...展开语法，把对象中的键值对作为props传递给<input>元素：
   • 展开{ required: true }等价于直接写required={true}，React会将这个布尔属性渲染为DOM中的<input required>（符合HTML布尔属性规范，只要属性存在就表示true）
   • 展开空对象时，不会传递任何额外属性，相当于不设置required，此时DOM元素中没有required属性，对应false的状态

同时，React对布尔属性有特殊处理：只要属性值是true，就会渲染该属性；如果是false或者不传递该属性，就不会渲染。这完全匹配「根据props决定是否启用必填」的需求。

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