Question

我在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) {  </div> <div class="row"> } else {  } } </div>，您就可以动态结束该角色并开始一个新的角色。

类似这样的东西：

 <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>

我在地图函数中尝试了此方法，它给出了语法错误，因为在条件通过的情况下返回的值不是有效的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>

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

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

{{1}}

Answer 1

这样的事情怎么样？

{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>
    )
)}

Answer 2

您可以使用常规i for循环增加每个循环2个，并检查第二个选项是否设置为照顾长度不均的数组：

示例

function App() {
  const content = [];

  for (let i = 0; i < options.length; i += 2) {
    content.push(
      <div class="row">
        <div class="col-md-6">
          <div class="option correct-option">{options[i].text}</div>
        </div>
        {options[i + 1] && (
          <div class="col-md-6">
            <div class="option correct-option">{options[i + 1].text}</div>
          </div>
        )}
      </div>
    );
  }

  return <div>{content}</div>;
}

如何使用带有条件包装的map（）函数在JSX中渲染数组条目

2 个答案: