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

Posted 2023-03-16

【中文标题】将默认 className 设置为空字符串，然后提供两个条件

【英文标题】：Set default className to an empty string then provide two conditions

【发布时间】：2021-05-08 17:22:41

【问题描述】：

我有这个条件 className=errors.firstName ? "invalid" : "valid"

但如果这两个条件都不满足，我需要将其默认为空字符串。

我正在努力思考如何解决这个问题，由于我找不到任何资源，因此不胜感激。

我将不得不在其他文本区域字段上多次调用它，所以我知道我需要使其可重用。

【问题讨论】：

现在您有两个状态，true 或 false。所以你应该有一个像initialStatus这样的初始状态，然后你可以像这样实现你想要的：className=(errors.firstName === 'initialStatus')?"":(errors.firstName)? "invalid":"valid"

如果我的评论不清楚，请告诉我您是否可以拥有initialStatus。所以我可以为你做一个sn-p

好的，所以我创建了一个变量intialState并将其设置为false，我也尝试将其设置为一个空字符串，但它仍然将默认样式设置为valid而不是@ 987654330@

不，你没明白我的意思。看，只需给errors.firstName 一个名为initialStatus 的初始值，然后使用我发布的条件。简而言之，errors.firstName 需要具备三种状态。你可以用你能想到的任何方式来做到这一点。我说的是我想到的第一种方式。 （现在你有两个状态 true 和 false。你需要三个。再做一个）

【参考方案1】：

您可以为此使用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 将是一个空字符串。

【参考方案2】：

让我们假设您的 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",
  )
/>;