react-bootstrap中Form.Control自定义组件的isInvalid属性不生效问题

问题原因 #

1. 语法错误：原始代码中将isInvalid作为Form.Control的子内容传入，而非组件属性，属性需要写在组件标签的尖括号内部才会生效。
2. 自定义组件未透传参数：通过as属性传入的forwardRef组件没有接收props和ref参数，也没有将其挂载到渲染的根DOM节点上，react-bootstrap传递的isInvalid状态、校验类名全部丢失，无法触发invalid样式和Feedback联动逻辑。

正确实现代码 #

首先定义符合要求的自定义控制组件：

import { forwardRef } from 'react';
import Form from 'react-bootstrap/Form';

// 必须使用forwardRef包裹，接收props和ref两个入参
const CustomReportControl = forwardRef((props, ref) => {
  // 所有传入的props透传给根节点，ref也挂载到根节点
  return <div ref={ref} {...props}>Report</div>
});

在表单中使用：

<Form.Group>
  <Form.Control
    isInvalid
    as={CustomReportControl}
  />
  <Form.Control.Feedback type="invalid">Invalid Report</Form.Control.Feedback>
</Form.Group>

核心规则 #

• 所有传入Form.Control的as属性的自定义组件，必须透传全部接收到的props和ref，react-bootstrap依赖这些参数实现校验状态绑定、样式注入和Feedback的显隐控制。
• 组件属性必须写在标签的尖括号内部，不要作为子内容传入。

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