水平对齐 react.js 中的组件列表答案

【问题标题】：horizontally align a list of components in react.js水平对齐 react.js 中的组件列表
【发布时间】：2021-11-11 03:40:23
【问题描述】：

我必须水平对齐使用地图函数渲染的组件，因为它的默认垂直对齐。

这是我的组件：

                <Table.Cell>
                 {[...Array(this.props.numPages)].map((e, i) => (
                   <Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'>
                     {i + 1}
                   </Typography>
                 ))}
               </Table.Cell>

这里Typography 是必须呈现为页码但它会垂直呈现的组件。

这是我使用的 css：

.pages{
    display: flex;
    flex-direction: horizontal;
  }

我们将不胜感激。

【问题讨论】：

标签： javascript html css arrays reactjs

【解决方案1】：

需要flex的是wrapper，flex方向horizontal不存在...

不妨试试这个：

            <Table.Cell>
              <div style={{display:'flex', flexDirection:'row'}}>
             {[...Array(this.props.numPages)].map((e, i) => (
               <Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'>
                 {i + 1}
               </Typography>
             ))}
             </div>
           </Table.Cell>

【讨论】：