Question

我想从firebase中提取数据，然后将其作为表格在我的react组件中呈现。到目前为止一切运行良好，它正确地呈现数据。但是，我不想每次都呈现表格标题。这是到目前为止的代码：

  <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>

将行添加到react jsx中的表中，而不复制行标题

1 个答案: