React/Nextjs中如何为组件内的Input设置条件式required属性？

问题根源很明确：HTML的required是布尔属性，只要这个属性存在（哪怕值写的是'false'），浏览器都会判定它为true，强制触发必填校验。你当前的组件不管传入true还是false，都会给input加上required属性，只是值不同，所以所有输入框都被当成了必填项。

最佳修复方案 #

直接把布尔值传给required，利用React的特性：如果属性值是false、undefined或null，React不会渲染这个属性。修改后的组件代码如下：

function Input({ type, name, placeholder, required }) {
    return (
        <div className="inputContainer">
            <input 
                placeholder={placeholder} 
                type={type} 
                name={name} 
                required={required} {/* 直接传布尔值，不用转字符串 */}
            />
            <label htmlFor={name}>{placeholder}</label>
        </div>
    )
}

调用时的效果：

• 传required={true}，React会渲染<input required>，符合HTML布尔属性规范，输入框变为必填
• 传required={false}或者不写required参数（此时required为undefined），React不会渲染required属性，输入框非必填

额外优化：设置默认非必填 #

如果希望组件默认是不需要必填的，可以给required参数加个默认值：

function Input({ type, name, placeholder, required = false }) {
    return (
        <div className="inputContainer">
            <input 
                placeholder={placeholder} 
                type={type} 
                name={name} 
                required={required}
            />
            <label htmlFor={name}>{placeholder}</label>
        </div>
    )
}

这样调用时如果不指定required，输入框默认就是非必填，更贴合日常使用场景。

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