在 React 中并排放置每个 div 的 2 个元素

Question

我有一个这样的数组：

const arr = [1,2,3,4,5,6,7,8,9,10]

我想将它们作为二维 div 中的每一行放置 2 个。 让我说明一下我想说的话：

这是主要的 React 元素：

render() {
  return <div className="base">{...}</div>
}

预期结果：

render() {
  return <div className="base">
            <div className="container">
              <div className="left">
                <span>1</span>
                <span>2</span>
              </div>
              <div className="right">
                <span>3</div>
                <span>4</div>
              </div>
            </div>
            <div className="container">
              <div className="left">
                <span>5</span>
                <span>6</span>
              </div>
              <div className="right">
                <span>7</div>
                <span>8</div>
              </div>
            </div>
            <div className="container">
              <div className="left">
                <span>9</span>
                {/* no 10th element because 9 is the last. */}
              </div>
              {/* no right div because no more elements. */}
            </div>

         </div>
}

如果这是典型的奇偶情况，我会在这里执行i % 2 。 但是，我将如何关闭奇数或偶数的 div 标签？ 但它比这更复杂一些。 有没有办法在 React 中实现这一点？ 顺便说一句，我正在使用 TypeScript 和最新的 ReactJS。

Answer 1

这可以通过某些方式完成，但这里有一个示例： https://codesandbox.io/s/distracted-joliot-lkdxq

import React from "react";
import "./styles.css";

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const Result = () => {
  return (arr.map(item => {
    return (
      <div key={item} className="box">
        {item}
      </div>
    );
  }));
};
export default function App() {
  return (
    <div className="App">
      <Result />
    </div>
  );
}

这是 css：

.App {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-gap: 10px;

}

.box {
  display: flex;
  border: 1px black solid;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
}

Answer 2

我认为这是您正在寻找的答案：https://codesandbox.io/s/goofy-snowflake-tdzjn?file=/src/App.js

import React from "react";
import "./styles.css";

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const Result = () => {
  return arr.map((item, index) => {
    return (
      index % 2 === 0 && (
        <div key={item} className="box">
          <span>{arr[index]}</span>
          <span>{arr[index + 1]}</span>
        </div>
      )
    );
  });
};
export default function App() {
  return (
    <div className="App">
      <Result />
    </div>
  );
}

这是 css：

.App {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-gap: 10px;

}

.box {
  display: flex;
  border: 1px black solid;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.box span {
  margin: 0 5px;
}

Answer 3

为了在反应中呈现更高级的循环，您需要习惯于对 arrays 进行分块。 您可以使用以下 function 简单地将数组分块两次，然后您可以递归地使用 map 这个数组来呈现您想要的 output：

function chunk_array(arr,chunkSize=2) {
  const result=[];
  for(let i=0;i<arr.length;i+=chunkSize) {
    result.push(arr.slice(i,i+chunkSize));
  }
  return result;
}

**注意：我做了一个 JS 小提琴，所以你可以想象这个数组是如何变成我们需要的形状来呈现你想要的 html output ** JS FIDDLE

现在你可以在渲染中利用它来完成你想要的。

import React from 'react';

function chunk_array(arr,chunkSize=2) {
    const result=[];
    for(let i=0;i<arr.length;i+=chunkSize) {
        result.push(arr.slice(i,i+chunkSize));
    }
    return result;
}

const arr = [1,2,3,4,5,6,7,8,9,10];

const chunked = chunk_array(chunk_array(arr));// we chunk array twice to get desired structure.

class Example extends Component {

    render() {
        return (
            <div className="container">
                {chunked.map((container,i)=>(
                    <div className="base" key={i}>
                    {container.map((row,i2)=>(
                    <div key={i2} className={(i2===0?"left":"right")}>
                        {row.map((item,i3)=><span key={i3}>{item}</span>)}
                    </div>))}
                </div>))}
            </div>
        )
    }

}

Answer 4

您可以使用引导程序来执行此操作。 将所有内容放在一个 div className="row" 中，然后让每个项目都有 className="col-6"。 Bootstrap 将每一行分成 12 列，因此为这些列中的每个元素 6 将导致它们在一行上为 2，如您所愿。 您需要 npm 安装引导程序并在您的应用程序中包含适当的脚本标签。 看看这里， https://getbootstrap.com/docs/3.3/getting-started/ 。 让我知道这是否有帮助！