将默认 className 设置为空字符串然后提供两个条件

如何解决将默认 className 设置为空字符串然后提供两个条件

我有这个条件 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",})}
/>;