如何渲染重复的React元素？

Question

我写了一些代码来渲染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在模板代码中嵌入循环,或者类似的方法.)

Answer 1

您可以将表达式放在大括号内.请注意,在编译的JavaScript中,为什么for在JSX语法中永远不可能有循环; JSX相当于函数调用和含糖函数参数.只允许表达式.

(另外:请记住向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);
              })
            )
          );
        })
      )
    )
  );
} 

Answer 2

为了扩展Ross Allen的答案,这里有一个使用ES6箭头语法的略微更清晰的变体.

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

它的优点是JSX部分是隔离的(无return或者;),因此更容易围绕它进行循环.

Answer 3

浅(通过阵列from():

<table>
    { Array.from({length:3}, (value, index) => <tr key={value.id} />) }
</table>

另一种方式是通过Array fill():

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

嵌套节点:

 var table = (
      <table>
        { Array.from(Array(3)).map((tr, tr_i) => 
            <tr> 
              { Array.from(Array(4)).map((a, td_i, arr) => 
                  <td>{arr.length * tr_i + td_i + 1}</td>
               )}
            </tr>
        )}
      </table>
);

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main></main>