React条件渲染无结构影响实现方案咨询（含Ant Design场景）

我之前在Ant Design项目里也碰到过一模一样的问题——用div包裹条件渲染的Col组件，直接打乱了Row的栅格布局，毕竟Row是直接认子元素里的Col来计算排版的，中间多了一层div肯定会出问题。下面给你几个实用的解决方案：

1. 用React.Fragment替代div（最推荐） #

React提供了React.Fragment（或者它的短语法<>），它可以包裹多个元素但不会在DOM中生成额外的节点，完美对应Vue里的<template>功能。

把你代码里的<div>替换成<React.Fragment>或者直接用<>就行，比如第一个条件分支可以改成这样：

{customerClass === '6' ? (
  <>
    <Col span="8">
      <FormItem {...formItemLayout} label="">
        {getFieldDecorator('businessUnitName', { rules: [ { required: true, message: '' }, { validator: this.checkBusinessUnitName, }, ], })(<Input placeholder="" />)}
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem {...formItemLayout} label="">
        {getFieldDecorator('businessUnitAddress', { rules: [{ required: true, message: '' }], })(<Cascader options={storage.get('addressData')} placeholder="" showSearch />)}
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem {...formItemLayout} label="">
        {getFieldDecorator('businessUnitAdd', { rules: [ { required: true, message: '' }, { whitespace: true, message: '' }, { validator: this.checkBusinessUnitAdd, }, ], })(<Input placeholder="" />)}
      </FormItem>
    </Col>
  </>
) : null}

如果你的项目不支持JSX短语法（比如老版本React），就用完整的<React.Fragment>标签即可。

2. 返回元素数组 #

另一种方式是直接返回一个包含多个Col的数组，不过要记得给每个元素加上唯一的key属性，避免React警告：

{customerClass === '6' ? (
  [
    <Col key="business-unit-name" span="8">
      {/* 内容省略 */}
    </Col>,
    <Col key="business-unit-address" span="8">
      {/* 内容省略 */}
    </Col>,
    <Col key="business-unit-add" span="8">
      {/* 内容省略 */}
    </Col>
  ]
) : null}

这种方式也不会生成额外DOM节点，不过相比Fragment，代码会多一点括号和key，适合需要手动控制元素顺序的场景。

3. 优化条件判断逻辑（可选） #

你代码里多次用到['1','2','3','4'].includes(customerClass)这类判断，可以把这些判断抽成变量，让代码更简洁易维护：

const isClass1To4 = ['1', '2', '3', '4'].includes(customerClass);
const isClass1To5 = ['1', '2', '3', '4', '5'].includes(customerClass);
const isClassAll = ['1', '2', '3', '4', '5', '6'].includes(customerClass);

然后在条件渲染里直接用这些变量：

{isClass1To4 ? (
  <>
    <Col span="8">...</Col>
    <Col span="8">...</Col>
  </>
) : null}

这样后续修改customerClass的判断范围时，只需要改变量定义就行，不用到处找代码。

把上面的方案应用到你的代码里，Row里的Col就能正常按照Ant Design的栅格规则排版了，不会再被额外的div干扰。

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