Question

我有一个数组，其中的项目可以有偶数或奇数个项目。我制作了一个函数，将每个两个元素放入主数组中各自的数组中，因此最终看起来像这样；

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

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

之所以这样做，是因为我想用页面上的两列来呈现每个Bootstrap行。现在，我不确定如何通过此数组实现映射。在某种程度上，我知道该怎么做；

通过返回的数组进行映射。
如果当前数组中的第二个元素为undefined，则返回仅包含一项的行。
如果两个元素都在当前数组中定义，则返回包含两个项目的行。

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

Answer 1

我想不出一种map原始数组的好方法，但是您可以使用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>;
  }
}

如果要使用数组的数组，可以map使用它，然后在使用数组之前检查数组中的第二个元素是否为真。

示例

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

根据React中多维数组中的数据渲染组件

1 个答案: