Làm cách nào để hiển thị các phần tử React lặp lại?

Tôi đã viết một số mã để hiển thị các phần tử lặp lại trong ReactJS, nhưng tôi ghét nó xấu xí đến mức nào.

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>
  );
} 

Có cách nào tốt hơn để đạt được điều này không?

(Tôi muốn nhúng forcác vòng trong mã mẫu hoặc một số cách tiếp cận tương tự.)

Bạn có thể đặt các biểu thức bên trong dấu ngoặc nhọn. Lưu ý trong JavaScript đã biên dịch tại sao một forvòng lặp sẽ không bao giờ có thể thực hiện được bên trong cú pháp JSX; JSX tương ứng với các lệnh gọi hàm và các đối số hàm có đường. Chỉ cho phép các biểu thức.

(Ngoài ra: Hãy nhớ thêm keythuộc tính vào các thành phần được hiển thị bên trong các vòng lặp.)

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);
              })
            )
          );
        })
      )
    )
  );
} 

Để mở rộng câu trả lời của Ross Allen, đây là một biến thể gọn gàng hơn một chút sử dụng cú pháp mũi tên ES6.

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

Nó có lợi thế là phần JSX được tách biệt (không returnhoặc ;), giúp dễ dàng đặt vòng lặp xung quanh nó.

Vì Array(3)sẽ tạo ra một mảng không thể lặp lại , nó phải được điền để cho phép sử dụng mapphương thức Mảng. Một cách để "chuyển đổi" là hủy nó bên trong dấu ngoặc nhọn Mảng, điều này "buộc" Mảng phải được lấp đầy bằng undefinedcác giá trị, giống nhưArray(N).fill(undefined)

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

Một cách khác sẽ là thông qua Array fill():

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

Vấn đề với ví dụ trên là thiếu giá keyđỡ, đó là điều bắt buộc .
(Sử dụng một iterator ấy indexnhư keykhông được khuyến khích)

Các nút lồng nhau:

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>

Theo tinh thần của lập trình chức năng, hãy làm cho các thành phần của chúng ta dễ làm việc hơn một chút bằng cách sử dụng các trừu tượng.

// 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);

Bây giờ chúng ta có thể xác định kết xuất của mình như thế này:

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

jsbin

Một thay thế cho map2d của chúng tôi sẽ là một chức năng bản đồ cà ri, nhưng mọi người có xu hướng né tránh việc làm cà ri.

Đây là, imo, cách tốt nhất để làm điều đó (với ES6). Tạo cho bạn mảng trống với 7 chỉ mục và ánh xạ trong một dòng:

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

kudos tới https://php.quicoto.com/create-loop-inside-react-jsx/