반복 React 요소를 렌더링하려면 어떻게 해야 합니까?

반복 React 요소를 렌더링하려면 어떻게 해야 합니까?

ReactJs에서 반복 요소를 렌더링하기 위해 코드를 몇 개 작성했지만, 너무 못생겨서 싫어요.

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
} 

이것을 달성할 수 있는 더 좋은 방법이 있나요?

(포함하고 싶다)for템플릿 코드 내 또는 유사한 접근법 내에서 루프가 발생합니다.

괄호 안에 표현을 넣을 수 있습니다.컴파일된 JavaScript에 있는 이유는for루프는 JSX 구문에서는 불가능하며, JSX는 함수 호출 및 Sugared 함수 인수에 해당합니다.식만 사용할 수 있습니다.

(또, 추가에 주의해 주세요).key루프 내부에 렌더링된 컴포넌트의 속성)

JSX + ES2015:

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
} 

JavaScript:

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
} 

부터Array(3)반복할 수 없는 어레이가 생성됩니다.이 어레이를 작성하려면 , 이 어레이에 값을 입력할 필요가 있습니다.map배열 방식'변환'하는 방법은 어레이 브래킷 내에서 어레이를 파괴하는 것입니다.이것에 의해 어레이가 「강제적으로」 채워집니다.undefined같은 값Array(N).fill(undefined)

<table>
    { [...Array(3)].map((_, index) => <tr key={index}/>) }
</table>

다른 방법은 어레이를 사용하는 것입니다.

<table>
    { Array(3).fill(<tr/>) }
</table>

⚠상기 예시의 문제점은 다음과 같습니다.key필수품인 소품입니다.
(반복기 사용)index~하듯이key권장하지 않음)

---

중첩 노드:

const tableSize = [3,4]
const Table = (
    <table>
        <tbody>
        { [...Array(tableSize[0])].map((tr, trIdx) => 
            <tr key={trIdx}> 
              { [...Array(tableSize[1])].map((a, tdIdx, arr) => 
                  <td key={trIdx + tdIdx}>
                  {arr.length * trIdx + tdIdx + 1}
                  </td>
               )}
            </tr>
        )}
        </tbody>
    </table>
);

ReactDOM.render(Table, document.querySelector('main'))

td{ border:1px solid silver; padding:1em; }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<main></main>

Ross Allen의 답변을 자세히 설명하자면, ES6 화살표 구문을 사용한 조금 더 깔끔한 변형입니다.

{this.props.titles.map(title =>
  <th key={title}>{title}</th>
)}

JSX 부품이 분리된다는 장점이 있습니다(No.return또는;)를 사용하면 루프를 쉽게 만들 수 있습니다.

(ES6에서는) 이것이 가장 우아한 방법입니다.7개의 인덱스와 맵을 사용하여 빈 어레이 인스턴스화:

Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)

https://php.quicoto.com/create-loop-inside-react-jsx/에 대한 칭찬

기능 프로그래밍의 정신에 따라 추상화를 사용하여 컴포넌트를 좀 더 쉽게 작업하도록 하겠습니다.

// converts components into mappable functions
var mappable = function(component){
  return function(x, i){
    return component({key: i}, x);
  }
}

// maps on 2-dimensional arrays
var map2d = function(m1, m2, xss){
  return xss.map(function(xs, i, arr){
    return m1(xs.map(m2), i, arr);
  });
}

var td = mappable(React.DOM.td);
var tr = mappable(React.DOM.tr);
var th = mappable(React.DOM.th);

이제 렌더링을 다음과 같이 정의할 수 있습니다.

render: function(){
  return (
    <table>
      <thead>{this.props.titles.map(th)}</thead>
      <tbody>{map2d(tr, td, this.props.rows)}</tbody>
    </table>
  );
}

jsbin

---

우리 map2d의 대안으로 curryed map 기능을 들 수 있지만 사람들은 currying을 꺼리는 경향이 있다.

언급URL : https://stackoverflow.com/questions/25646502/how-can-i-render-repeating-react-elements