javascript - 通过创建水平表的数组进行映射

Question

我正在尝试映射一个数组并动态创建一个水平表，就像下面的图片一样。

我正在像这样通过数组进行映射，

 const glanceGames = this.state.gameData.map(game => {
        return <GameTable
            key={game.id}
            home_team_name={game.home_name_abbrev}
            away_team_name={game.away_name_abbrev}
            home_score={game.linescore.r.home}
            away_score={game.linescore.r.away}
            status={game.status.status}
        />
    })

然后使用该数据填充以下组件。

const GameTable = (props) => {
  return (
    <div>
           <table>
            <thead>
                <tr>
                    <th>{props.status}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{props.home_team_name}</td>
                    <td>{props.home_score}</td>
                </tr>
                <tr>
                    <td>{props.away_team_name}</td>
                    <td>{props.away_score}</td>
                </tr>
            </tbody>
          </table>
    </div>
)

}

但是，输出是一个垂直表格而不是水平表格。我觉得这应该很容易，但我不断遇到问题。安努的建议会很有帮助!我正在使用 React。

Answer 1

我认为这与react无关，我们可以用css来做:

...

render(){
  <div style={{display: 'flex'}}>
    {glanceGames}
  </div>
}