时间戳

首页 > 解决方案 > 如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目

javascript - 如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目

问题描述

我在 JavaScript 中有一个对象数组，我想遍历这些对象并返回一些带有引导类的 JSX，这样每行总是在其中显示 2 列。

options: [
  {
    "letter":"A",
    "text": "14 March 1879"
  },
  {
    "letter":"B",
    "text": "14 March 1897"
  },
  {
    "letter":"C",
    "text": "24 May 1879"
  },
  {
    "letter":"D",
    "text": "24 June 1879"
  }
]

根据我使用其他语言和模板引擎的经验，这非常简单：您只需使用div类创建一个开始标签和一个结束标签，row然后使用您的模板引擎，循环并渲染每个对象，直到您的循环计数器为2，您动态地结束该角色并开始一个新角色。

像这样的东西：

<div class="row">
    for (var i in options) {
      if(i%2 === 0) {
        <!-- render object ... -->
        </div><!-- then end this row -->
        <div class="row"><!-- start new row -->
      } else {
        <!-- render object -->
      }
    }
</div>

我在我的 map 函数中尝试了这个方法，它给出了一个语法错误，因为在条件通过的情况下返回的值不是有效的 JSX。

谢谢你的帮助。

编辑：

最后，我想要实现的是：

如果对象数组包含 2 个对象，我应该能够像这样动态显示它：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

如果数组包含 3 个对象，我想实现这一点：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      C <!-- that is, option.letter -->
    </div>
  </div>
</div>

标签： javascriptreactjsjsxmap-function

解决方案

这样的事情怎么样？

{options.map((option, i) => (
    i % 2 === 0 ? null : ( // skip every 2nd row
      <div class="row">
        A: {option}
        B: {i < options.length ? options[i + 1] : null}
      </div>
    )
)}

推荐阅读