将行添加到React JSX中的表中，而无需复制行标题

Question

我想从firebase中获取数据，然后将其渲染在我的反应组件中作为表。到目前为止，一切都很好，并且可以正确地渲染数据。但是，我不想每次渲染桌子标题。这是到目前为止的代码：

  <div className="table">
    <h1> Table </h1>
    {players.sort(function(a, b) {
          return (a.rank) - (b.rank);
      }).map(function(player, index) {
      index +=1;
      return <table>
              <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Wins</th>
                <th>Losses</th>
              </tr>
              <tr>
                <th>{player.rank}</th>
                <th>{player.name}</th>
                <th>{player.wins}</th>
                <th>{player.losses}</th>
              </tr>
            </table>
    }, this)}
  </div>

我明白为什么要这样做，因为每次我映射阵列时，它都会返回桌子标题。我无法做出一种使桌子标题不同的方法。我想将其移出这部分，但是如果这很有意义，我不确定如何将其与表链接起来。我基本上只需要rank，name，wins，losses，一次渲染一次。

Answer 1

您可以将零件从地图中取出您不想迭代数据的零件。

  <div className="table">
    <h1> Table </h1>
    <table>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Wins</th>
        <th>Losses</th>
      </tr>
    {players.sort(function(a, b) {
          return (a.rank) - (b.rank);
      }).map(function(player, index) {
      index +=1;
      return <tr>
               <th>{player.rank}</th>
               <th>{player.name}</th>
               <th>{player.wins}</th>
               <th>{player.losses}</th>
             </tr>
    }, this)}
     </table>
  </div>