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

Question

我有一个包含项目的数组，项目数量可以是偶数也可以是奇数。我做了一个函数，将每两个元素放在主数组内的自己的数组中，所以最后看起来像这样；

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

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

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

映射到 returned 数组。
如果当前数组中的第二个元素是 undefined return 一行只有一项。
如果两个元素都在当前数组中定义 return 包含两个项目的一行。

但是根据 React 规则，我需要向 return 和 map 的元素添加额外的 key 属性，因此我需要以某种方式跟踪 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 中多维数组的数据渲染组件

Render components based on the data from a multidimensional array in React

javascript

reactjs

map-function