Question

我在react-redux-form中有以下内容：

<fieldset>
  <label>{label}</label>
  <div>
    <input {...input} name="email" type="text" className="form-control" />
    {touched && error && <span className="error">{error}</span>}
  </div>
</fieldset>

我希望能够使用

更新<fieldset>

className=""
className="has-success"
className="has-danger"

逻辑是：

如果touched但没有error：<fieldset className="has-success">
如果touched和error：<fieldset className="has-danger">
如果不是touched也不是error：<fieldset className="">

如何在React中使用它？

Answer 1

你可以像这样实现它：

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

首先检查touched是否真实。如果是，则只有当<fieldset>为真或"has-danger"时才会呈现error哪个类为"has-success"。如果touched，不存在，则该类为空字符串。这假设不存在touched为假且error无效的情况（尽管您可以添加更多来处理该情况）。

如果您发现这有点不可读，可以尝试使用更具可读性的classnames NPM包：

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

这是更具可读性的，并不假设不存在touched为假且error是真实的情况。

如何有条件地添加className？

1 个答案: