React中如何为输入框条件添加readOnly属性？

嘿，这个需求其实React本身就提供了超简洁的实现方式，完全不用写复杂的条件分支或者额外的逻辑处理～

核心思路：利用React对布尔属性的特殊处理 #

React在处理HTML的布尔属性（比如readOnly、disabled、checked这类）时，有个非常实用的特性：

• 当你给属性传入true时，它会正常渲染这个属性（符合HTML规范，不会写成readonly="true"，而是直接输出<input readonly>）
• 当你传入false、null或undefined时，React会直接忽略这个属性，不会把它渲染到DOM中

最简实现代码 #

如果是类组件：

class MyInput extends React.Component {
  render() {
    return <input readOnly={this.props.boolean} />;
  }
}

如果是现在更常用的函数组件：

function MyInput({ boolean }) {
  return <input readOnly={boolean} />;
}

这里只需要把你的布尔类型props直接绑定到readOnly属性上就搞定了：

• 当this.props.boolean（或函数组件的boolean参数）为true时，输入框会带上readonly属性，变成只读状态
• 当它为false时，这个属性不会出现在DOM里，输入框保持可编辑

没必要的复杂写法（避坑） #

有些同学可能会想到用扩展运算符加条件判断，比如：

<input {...(this.props.boolean ? { readOnly: true } : {})} />

或者三元表达式冗余赋值：

<input readOnly={this.props.boolean ? true : undefined} />

这些写法虽然也能生效，但完全是多此一举——直接绑定布尔值的写法已经足够简洁且易读，是React官方推荐的方式。

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