reactjs - 如何循环div内容，而不是div本身

Question

我想循环遍历所有错误并将它们显示在引导警报 div 中，而不是每个项目都显示在自己的警报 div 中。

这显然为每个错误输出一个 div，这不是我想要的。

      {Array.isArray(this.state.errors) &&
        this.state.errors.map((error, index) => (
          <div key={index} className="alert alert-danger">
            {error.name}
            {error.email}
            {error.password}
          </div>
        ))}

如果我这样做，那么当页面加载时，我会有一个空的红色 div 坐在那里。

      <div className="alert alert-danger">
        {Array.isArray(this.state.errors) &&
          this.state.errors.map((error, index) => (
            <div key={index}>
              {error.name}
              {error.email}
              {error.password}
            </div>
          ))}
      </div>

Answer 1

如果<div className="alert ...即使没有任何内容也是可见的，那么您需要将条件与 map 分开，如下所示:

  {Array.isArray(this.state.errors) && (
    <div className="alert alert-danger">
      {this.state.errors.map((error, index) => (
        <div key={index}>
          {error.name}
          {error.email}
          {error.password}
        </div>
      ))}
    </div>
  )}