如何渲染重复的元素？

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

为了扩展Ross Allen的答案，这里有一个使用ES6 arrow语法的稍微简洁的变体。

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

它的优点是JSX部分是隔离的（无返回或；），因此更容易在其周围放置循环。

Answer 2

由于Array（3）将创建一个不可编辑的数组，因此必须填充该数组以允许使用mapArray方法。“转换”的一种方法是在数组括号内对其进行分解，这将“强制”数组填充未定义的值，与数组（N）相同。填充（未定义）

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

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

⚠️上面例子的问题是缺少keyprop，这是必须的。（不建议使用迭代器的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>

Answer 3

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

（另外：请记住将键属性添加到循环内渲染的组件。）

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