React开发中如何简化checked属性条件绑定的冗余代码？

简化方案 #

直接动态绑定checked属性即可，不需要用三元运算重复编写input标签，简化后代码如下：

<input
  id={id}
  name={name}
  type="radio"
  className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
  checked={checked != false}
/>

原理解释 #

React 原生支持给布尔类型的DOM属性动态传值：

• 当传入值为真时，checked属性生效，单选框处于选中状态
• 当传入值为假时，checked属性不生效，单选框处于未选中状态

完全替代了你原来用三元判断分别渲染两种状态input的逻辑，没有任何冗余。如果你的checked prop本身就是严格的布尔值，不需要兼容未传参的场景，还可以进一步简化成checked={checked}。

内容的提问来源于stack exchange，提问作者Harsha M V