如何以formik形式从DOM中删除空错误div？

Question

bounty到期在8小时内。这个问题的答案有资格获得+ 200声望赏金。SoftTimur希望引起更多关注对此问题：

粉红色的栏很烦人。请参阅gdh的示例...

我在身份验证页面中具有以下代码来控制警报消息：

<div className="messages-wrapper">
  {formik.errors.email &&
    <div className="alert alert-danger">
      <ErrorMessage name="email" />
    </div>
  }
  {formik.errors.password &&
    <div className="alert alert-danger">
      <ErrorMessage name="password" />
    </div>
  }
  {error && <div className="alert alert-danger">{error}</div>}
</div>

我意识到有时在DOM中它具有：

<div class="alert alert-danger"></div>

因此，结果是显示中的粉红色栏。

有人知道如何实现这样的方式，即仅在有文本的情况下才显示警报栏吗？

Answer 1

请确保初始化所有输入/字段值

Answer 2

您看到粉红色条的原因是，当您在提交表单时遇到错误时，会显示一条错误消息。

Answer 3

您提供的代码示例不足以提供确定的答案。

Answer 4

您需要做的就是利用touched的FormikState

Answer 5

[不做进一步的介绍，我只需应用CSS即可解决：