问题描述
我有这个条件 className={errors.firstName ? "invalid" : "valid"}
但如果这两个条件都不满足,我需要将其默认为空字符串。
我正在努力思考如何解决这个问题,希望得到建议,因为我找不到任何资源。
我将不得不在其他文本区域字段上多次调用它,所以我知道我需要使其可重用。
解决方法
您可以为此使用 https://www.npmjs.com/package/classnames。
className={classNames({ invalid: errors.firstName === true },{ valid: errors.firstName === false })
因此,如果 errors.firstName = true
,则 className 将为 invalid
。如果errors.firstName = false
,那么它将是valid
。如果 errors.firstName 是 undefined
className 将是一个空字符串。
假设您的 firstName 错误首先不存在,或者在错误对象中使用 null 进行初始化。
const errors = { firstName: null } // or not having firstName
然后检查是否有 firsName 错误(可能是字符串类型,例如 firstName 错误消息或任何布尔值)。
<Component
className={
// if you explicitly set it to null use strict in-equality here
errors.firstName != null ? "" : errors.firstName ? "invalid" : "valid"
}
/>;
你也可以防止设置默认的空字符串,导致它的默认值:)
<Component
{...(errors.firstName != null && {
className: errors.firstName ? "invalid" : "valid",})}
/>;