时间戳

首页 > 解决方案 > 使用 map 函数返回 jsx

javascript - 使用 map 函数返回 jsx

问题描述

我是新手react-redux。我在这里做的是，

return analitics.map(analiticss => (
  <div className="col-md-8 d-flex justify-content-around questionDetailRow1">
    <div>
      <span>
        <i
          className="fa fa-check-circle"
          style={{ fontSize: "24px", color: "green" }}
        />
      </span>
      <span className="ml-2">
        {analitics.wrong ? `${analitics.wrong}` : "0"}
      </span>
    </div>
    <div>
      <span>
        <i
          class="fa fa-times-circle"
          style={{ fontSize: "24px", color: "red" }}
        />
      </span>
      <span className="ml-2">{analiticss.wrong}</span>
    </div>
    <div>
      <span className="skip-background">
        <i className="fa fa-fast-forward" style={{ color: "black" }} />
      </span>
      <span className="ml-2">{analiticss.skipped}</span>
    </div>
    <button type="button" className="btn btn-outline-primary">
      Change
    </button>
  </div>
));

所以，在这里我想在任何条件下都有这个 div。所以会发生什么，

如果分析不存在，那么这将不会得到回报。因为没有元素可以迭代。

所以，我想将该值显示为 `0.{analitics.skipped} 这个值。

但它不返回此元素，因为它没有任何数组元素。

我拥有的一种解决方案是使用 if else 来明确添加相同的 html 和 0 值。

但我认为这不是一个正确的解决方案。我可以使用其他解决方案吗？

标签： javascriptreactjsreduxreact-redux

解决方案

如果您希望包装器 div 仍然可见，则需要将地图功能移动到包装器 div 内。就像是：

<div className="col-md-8 d-flex justify-content-around questionDetailRow1"> {analytics.map(...)} </div>

推荐阅读