如何使反应组件成为具有不同大小的列和行的表

Question

我正在尝试将其变成反应组件，以便我可以在我的网站中使用它：

我不知道怎么做这个，或者如果涉及任何图书馆，我不知道哪些。

Answer 1

看起来这个组件会占用一些属性：

const CardsDisplay = ({numCards}) => { /* ... */ }

const AvatarDisplay = ({imageUrl, numCards, name, score, popupMenu }) =>
  <div style={{textAlign: 'center'}}>
    <div style={{display: 'flex', justifyContent: 'space-between'}}>
      <img src={imageUrl} />
      <CardsDisplay numCards={numCards} />
    </div>
    {name}
    <br />
    {score.toLocaleString()}
    <popupMenu style={{float: 'right'}} />
  </div>