关于 Antd 的 Form.Item 嵌套时必填项红点(红星)无法渲染的问题

方法一：

首先，在表单中嵌套 Form.Item 是很常见的自定义表单，如下图，嵌套的最外层 Form.Item, 一般只有 label 属性, name 属性不会起效，也意味着外层的 rule 的 required 不会起效，但我们的小红星只能表现在最外层，内层的 noStyle 属性会使其不被渲染
常见的 Form.Item 嵌套结构如下：

	// 数据
		const judgeData = [
    		{
      			value: 1,
      			label: '大于',
    		},
    		{
     			value: 0,
      			label: '等于',
    		},
    		{
      			value: -1,
      			label: '小于',
    		},
  		];
	// 结构
          <Form.Item label="范围" className="nesting-form-item">
            <Form.Item
              name="aaa"
              rules={[{ required: true, message: '请输入aaa!' }]}
              noStyle
            >
              <Select
                placeholder="请选择"
                onChange={() => {}}
                allowClear
                options={judgeData}
                style={{ width: '30%', marginRight: '5px' }}
              ></Select>
            </Form.Item>
            <Form.Item
              name="bbb"
              rules={[{ required: true, message: '请输入bbb!' }]}
              noStyle
            >
              <InputNumber style={{ width: '50%', marginRight: '5px' }} />
            </Form.Item>
            <span> 次</span>
          </Form.Item>

效果如下：

解决：在最外层的 Form.Item 加一个类，自己添加 * 号，这里添加的类是 nesting-form-item，定义如下：

.nesting-form-item {
  .ant-form-item-label > {
    ::before {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
}

解决的思想：就是自己根据 antd 的样式层级，自己添加带 * 的 before 元素

方法二：

• 就是自己在标签里面添加 *
• 但是， 和上面的仔细对比，你会发现，他们的样式并不相同，因为电脑的 * 和上面的content的 * 有点区别，如果有样式强迫症，那就二选一，第二种整体代码会多点。