ReactJs中根据isValue状态动态为input添加value属性的优雅实现

你可以利用JSX的对象展开语法实现简洁的条件属性添加，既避免重复代码，又不会出现空的value属性：

方案1：提取属性对象（可读性优先） #

const inputProps = this.state.isValue ? { value: this.state.amount } : {};
<input type="text" id="amount" name="amount" {...inputProps} />

方案2：内联条件展开（更简洁） #

<input 
  type="text" 
  id="amount" 
  name="amount" 
  {...(this.state.isValue && { value: this.state.amount })} 
/>

原理说明： #

• 当this.state.isValue为true时，this.state.isValue && { value: this.state.amount }会返回包含value属性的对象，通过...展开后就会给input添加该属性。
• 当this.state.isValue为false时，这个表达式返回false，React会自动忽略false、null、undefined这类无效的props，不会给input添加任何额外属性，完美避免了空value的问题。

你之前写法的问题： #

• 直接在JSX中写{this.state.isValue ? value=this.state.amount : null}不符合JSX语法规范，JSX要求属性必须是key={value}的形式，不能直接插入赋值表达式。
• 给value设null时，React会将其转换为空字符串，所以最终HTML会出现value=""，这就是你看到空value的原因。

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