javascript - 如何映射 JavaScript 数组的 i 和 i+1 值？

Question

我想使用 map 来显示 JavaScript map 中的第 i 个值和第 i+1 个值，以在轮播中显示一组两张卡片。

以下是我正在使用的代码，我想对其进行修改以获得所需的结果:

{testimonialContent.map((testimonial, i) => {
  return (
    <Carousel.Item className={classes.carousel_item}>
      <div className={classes.root}>
        <div className={classes.testimonial_card}>
          {testimonial[i]}
        </div>
        {/* Second card */}
        <div className={classes.second_card}>
          {testimonial[i+1]}
        </div>
      </div>
    </Carousel.Item>

如有任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

您可以使用reduce()来组合数据。

注意: (index % 2 === 0) 是您指定 nth 子级的位置(例如:2 in本例)

稍后在您的 render 方法中使用 destructuring在map()中。

const sampleData = ['first', 'second', 'third', 'fourth', 'fifth']

class App extends React.Component {
  render() {
    console.log("rendered");
    
    const edited = [].concat(sampleData).reduce((unique, value, index) => {
      if (index % 2 === 0) {
        return [...unique, [value]];
      }
      unique[unique.length - 1].push(value);
      return unique;
    }, [])
    
    return (
      <div>
        {edited.map(([item1, item2]) => 
          <div className='block'>
            {item1 && <div className='odd'>{item1}</div>}
            {item2 && <div className='even'>{item2}</div>}
          </div>
        )}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.block {
  border: 1px solid gray;
}

.odd {
  color: red;
}

.even {
  color: blue;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>