Question

我目前有功能组件：

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

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

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

上述问题是它没有考虑新的pristine道具，如果pristine为真，则不应添加"has-success"，因为用户没有＆＃39}什么都做不了。

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

Answer 1

我认为，使用ternary operator编写多个条件并不是一个好主意，你可以在这里做的只是调用一个函数并将if-else条件放在其中return类名从那个功能。

像这样：

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

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

对于Functional components，请使用{}，为类名放置所有逻辑，并将其与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>

对于要添加的每个潜在类，您描述了要添加的某个条件。如果touched是真实的且error是假的，则不添加任何类。如果不是pristine，touched和error，则会添加"has-danger"。如果不是pristine，touched和error，则添加"has-success"。你甚至可以摆脱第一个条件，因为它有点无用并添加你自己的案例。

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

2 个答案: