如何根据三个条件设置className？

Question

我目前拥有功能组件：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) =>
    <fieldset className=????
     .....

我目前正在使用这个三元表达式有条件地添加一个 class：

<fieldset className={touched ? (error ? "has-danger" : "has-success") : ""}>

上面的问题是它没有考虑到新的 pristine 属性，如果 pristine 为真，则不应添加 "has-success"，因为用户还没有什么都没做。

我如何更新上面的 className 逻辑，以便在 pristine 为假时仅添加 "has-danger" 或 "has-success"？

Answer 1

我认为，使用 ternary operator 编写多个条件不是一个好主意，您在这里可以做的只是简单地调用一个函数并将 if-else 条件放入其中，然后 return class 来自该函数的名称。

像这样：

<fieldset className={this._setClassName()}/>

_setClassName(){
    if()
       return "a";
    else if()
       return "b";
    else
       return "c";
}

对于 Functional components，使用 {}，放置 class 名称的所有逻辑并将其与 fieldset 元素一起使用。

像这样：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) => {
     let className = "";
     if()
        className = "a";
     else if()
        className = "b";
     else
        className = "c";

     return(
         <fieldset className={className}/>
     )
}

Answer 2

我同意使用三元运算符并不是最好的。您可以使用一些 if 语句来设置它，但我发现 classnames 包是一种更简洁的方法，它也可以是内联的。目前，您现在拥有的代码看起来像这样 classnames:

<fieldset className={classNames({
  "": !touched && !error,
  "has-danger": touched && error,
  "has-success": touched && !error
})}>
  ...
</fieldset>

您可以更改 "has-danger" 和 "has-success" 的条件以说明 pristine，如下所示：

<fieldset className={classNames({
  "": !touched && !error,
  "has-danger": !pristine && touched && error, //you could cache !prinstine && touched as to not have duplicate code
  "has-success": !pristine && touched && !error
})}>
  ...
</fieldset>

对于每个要添加的潜在 class，您描述了要添加的特定条件。如果 touched 为真而 error 为假，则不添加 class。如果不是pristine、touched、error，则添加"has-danger"。如果没有pristine，和touched，也没有error，则添加"has-success"。你甚至可以摆脱第一个条件，因为它有点没用，然后添加你自己的案例。

如何根据三个条件设置className？

How do I set className based on three conditions?

javascript

reactjs

react-jsx