[REACTJS] 매 n 번째 항목 추가 여는 태그 또는 닫는 태그를 react.js

매 n 번째 항목 추가 여는 태그 또는 닫는 태그를 react.js

해결법

1. ---

   1.

   render() {
      const rows = array_chunk(this.props.columns, 4)
      return (
        {
          rows.map((row) => (
            <div className="row">
            {
              row.map((col) => (
                <div className="col">{ col }</div>
              ))
            }
            </div>
          ))
        }
      )
   }
   

   예제 array_chunk (난 당신이 lodash를 사용하는 것이 좋습니다)

   module.exports = function chunks(arr, size) {
     if (!Array.isArray(arr)) {
       throw new TypeError('Input should be Array');
     }
   
     if (typeof size !== 'number') {
       throw new TypeError('Size should be a Number');
     }
   
     var result = [];
     for (var i = 0; i < arr.length; i += size) {
       result.push(arr.slice(i, size + i));
     }
   
     return result;
   };
   

2. ---

   2.사실은 단지 배열을 사용하고 고급 렌더링을 처리 반응한다.

   사실은 단지 배열을 사용하고 고급 렌더링을 처리 반응한다.

   render() {
       let rows = [],
           cols = []
       let index = 0
       const totalCols = 20;
   
       for (index; index < totalCols; index++) {
           cols.push(<div class="col" key={index}/>)
           if ((index + 1) % 4 == 0) {
               rows.push(
                   <div class="row" key={index}>
                       {cols}
                   </div>
               )
               cols = []
           }
       }
       return (
           <div class="container">
               {rows}
           </div>
       )
   }
   

from https://stackoverflow.com/questions/36318601/react-js-every-nth-item-add-opening-tag-or-closing-tag by cc-by-sa and MIT license