React JSX 内循环渲染

Question

Given an even length array, I am trying to find a clean method using React to put half an array in one div tag and inside it, each element should be in a span tag, and the same for the other half. For example, given the array of numbers 1 to 6, the rendered output should be:

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>

The main problem is dealing with the JSX combined with the JS, I can't figure how to achieve this result since some inner loop seems to must be used and it interferes with the returned rendered JSX.

I will also need this to be extended to do similar functionality with splitting the array to different amount of <div> tags, eg 3 <div> tags with 2 <span> tags in each.

How can we achieve this in a clean manner?

Answer 1

You can do it like this:

const arr = [1, 2, 3, 4, 5, 6];
.....

// Inside some JSX components render method
{[arr.slice(0, arr.length / equalParts),
  arr.slice(arr.length / equalParts - 1, arr.length)].map(
  (half, index) => (
    <div key={`outer_${index}`}>
      {half.map((item, index) => (
        <span key={`inner_${index}`}>{item}</span>
      ))}
    </div>
  ),
)}

For the second part of the question you can extract it to a function:

const splitAndRender = (arr: number[], equalParts: number) => {
  const slices = [];

  const innerLength = arr.length / equalParts;

  for (let i = 0; i < equalParts; i++) {
    slices.push(arr.slice(i * innerLength, (i + 1) * innerLength));
  }

  return slices.map((half, index) => (
    <div key={`outer_${index}`}>
      {half.map((item, index) => (
        <span key={`inner_${index}`}>{item}</span>
      ))}
    </div>
  ));
};

and use the function like:

const arr = [1, 2, 3, 4, 5, 6];
.....

{splitAndRender(arr, 3)}

Answer 2

You can use _.chunk() of lodash to split array:

const array = [1, 2, 3, 4, 5, 6];
const n=2;

render() {
    return _.chunk(array, [size=n]).map(subArray => <div>{subArray.map(i => <span>i</span>}</div>);
}

Answer 3

in React needs to close tags inline so i found just this (not so performant) way:

 const TMP = ({data,splitby}) => { let transformedData = data.reduce((r,v,i)=>{ if (i%splitby) r[r.length-1].push(v) else r.push([v]); return r },[]) return <div> { transformedData.map((v,index)=>( <div key={`div-$index`}> { v.map((s,idx)=> <span key={`div-${index}-span-${idx}`}>{s}</span>) } </div> )) } </div> }; ReactDOM.render( <TMP data={Array.from({length: 25}, (v, i) => i)} splitby={3}/>, document.getElementById("tmp_root") );

 div { border: 1px solid tomato; } span { display: block; border:1px solid silver; }

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