React Admin中实现循环渲染的三组输入组件并排布局

问题描述 #

我希望将3个输入组件并排显示。现有如下代码，期望在每次循环迭代中让BooleanInput、DisabledInput、TextInput这三个组件并排展示，请问该需求是否可行？

{ this.state.features.length > 0 ? this.state.features.map((feature) => { return ( <div> <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} /> <DisabledInput source="id" label="Value" defaultValue={feature} /> <TextInput source={this.assignFeatureValueProp(feature)} label="Value" /> </div> ) }) : null }

回答 #

当然可行啦！你只需要调整包裹三个输入组件的容器样式，就能轻松实现横向并排效果，最常用也最灵活的方案就是用CSS Flexbox布局。

原来的代码里，每个循环返回的<div>是块级元素，内部的组件默认会垂直堆叠。只要给这个容器添加flex布局属性，就能让子元素横向排列：

修改后的代码示例（内联样式版）

{ this.state.features.length > 0 ? this.state.features.map((feature) => { 
  return ( 
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', marginBottom: '1rem' }}> 
      <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} /> 
      <DisabledInput source="id" label="Value" defaultValue={feature} /> 
      <TextInput source={this.assignFeatureValueProp(feature)} label="Value" /> 
    </div> 
  ) 
}) : null }

样式属性说明

• display: flex：将容器转换为flex容器，内部元素自动横向排列
• gap: '16px'：给三个输入组件之间添加水平间距，避免拥挤
• alignItems: 'center'：让组件在垂直方向上居中对齐，视觉上更协调
• marginBottom: '1rem'：给每一行循环出来的组件组添加垂直间距，区分不同行

更整洁的类名样式版

如果不想用内联样式，也可以给容器加个自定义类名，然后在CSS文件中统一设置样式：

{ this.state.features.length > 0 ? this.state.features.map((feature) => { 
  return ( 
    <div className="feature-input-row"> 
      <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} /> 
      <DisabledInput source="id" label="Value" defaultValue={feature} /> 
      <TextInput source={this.assignFeatureValueProp(feature)} label="Value" /> 
    </div> 
  ) 
}) : null }

对应的CSS：

.feature-input-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

另外，如果你用的是React Admin这类组件库（从你用的BooleanInput等组件来看大概率是），库本身也提供了<Grid>、<Row>+<Col>这类布局组件，也可以用它们来实现并排，但Flexbox的方式更通用，不管用什么技术栈都能生效。

总之这个需求完全没问题，调整容器样式就能轻松实现啦！

内容的提问来源于stack exchange，提问作者Cansel Muti