javascript - 基于 React 中多维数组的数据渲染组件

Question

我有一个数组，其中的项目可以有偶数或奇数个项目。我创建了一个函数，它将每两个元素放入主数组内各自的数组中，所以最后看起来像这样；

items array: [{}, {}, {}, {}]
returned array: [[{}, {}], [{}, {}]]

items array: [{}, {}, {}]
returned array: [[{}, {}], [{}, undefined]]

我这样做是因为我想在页面上用两列渲染每个 Bootstrap 行。现在，我不确定如何通过这个数组实现映射。在某种程度上我知道如何做到这一点；

1. 通过返回的数组进行映射。
2. 如果当前数组中的第二个元素未定义，则返回仅包含一项的行。
3. 如果当前数组中定义了两个元素，则返回包含这两个项目的行。

但是根据 React 规则，我需要向使用 map 返回的元素添加额外的 key 属性，因此我需要以某种方式跟踪 index 变量。执行此操作的有效方法是什么？

Answer 1

我想不出一个很好的方法来映射你的原始数组，但是你可以使用for循环并在每次迭代时增加2，然后在使用它之前检查第二个元素是否为真.

示例

class App extends React.Component {
  render() {
    const content = [];

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

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

如果你想使用数组的数组，你可以映射它并在使用它之前检查数组中的第二个元素是否为真。

示例

class App extends React.Component {
  render() {
    return (
      <div>
        {itemsArray.map((items, index) => {
          <div class="row" key={index}>
            <div class="col-md-6">
              <div class="option correct-option">{items[0].text}</div>
            </div>
            {items[1] && (
              <div class="col-md-6">
                <div class="option correct-option">{items[1].text}</div>
              </div>
            )}
          </div>;
        })}
      </div>
    );
  }
}