Поместите 2 элемента на div бок о бок в React

Question

У меня есть такой массив:

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

И я хочу разместить их как 2 на одну строку в двухмерных div. Позвольте мне проиллюстрировать, что я пытаюсь сказать:

Это основной элемент 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

Для того, чтобы отображать более сложные циклы в 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;
}

** ПРИМЕЧАНИЕ. Я сделал скрипт JS, чтобы вы могли визуализировать, как этот массив изменяется, чтобы стать формой, которая нам нужна для рендеринга желаемого html вывода ** JS FIDDLE

теперь вы можете использовать это при рендеринге для достижения sh того, что вы хотите .

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 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

Это можно сделать разными способами, но вот пример: 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 4

Вы можете использовать bootstrap для этого. Поместите все в div className = "row", а затем пусть каждый из элементов имеет className = "col-6". Bootstrap разрезает каждую строку на 12 столбцов, поэтому если задать каждому элементу 6 из этих столбцов, их будет 2 в строке, как вы хотите. Вам нужно будет npm установить bootstrap и включить соответствующие теги скрипта в ваше приложение. Взгляните сюда: https://getbootstrap.com/docs/3.3/getting-started/. Сообщите мне, если это поможет!