最近开发了一个项目，使用了react19 + react-vant，在做表单功能的时候，发现日期选择组件不能用了，问题代码如下：
<Form.Item
name="birthday"
label="出生日期"
isLink
trigger="onConfirm"
onClick={(_, action) => {
//!!! 这里的action.current为空，所以导致日期组件不能弹出
action.current?.open();
}}
>
<DatetimePicker
popup={{ round: true }}
type="year-month"
>
{(val: Date) => (val ? dayjs(val).format("YYYY年MM月DD日") : "请选择")}
</DatetimePicker>
</Form.Item>
原因是因为React19中已经废弃了forwardRef，从React19开始，将ref作为prop进行访问，例如如下这样使用：
function MyInput({placeholder, ref}) {
return <input placeholder={placeholder} ref={ref} />
}
//...
<MyInput ref={ref} />
于是根据这个优化对react-vant的Form.Item组件做了下封装，封装代码如下：
function FormItem({ children, onClick, ...props }) {
const ref = useRef(null);
return (
<Form.Item
{...props}
onClick={(e) => {
if (onClick) {
onClick(e, ref);
}
}}
>
{!!children && cloneElement(children, { ref })}
</Form.Item>
);
}
然后在使用到Form.Item的地方使用FormItem就可以了，属性方法还是一样的用法
// 这里将 Form.Item 替换成 FormItem 即可
<FormItem
name="birthday"
label="出生日期"
isLink
trigger="onConfirm"
onClick={(_, action) => {
// 这里就能正确的拿到ref了
action.current?.open();
}}
>
<DatetimePicker
popup={{ round: true }}
type="year-month"
>
{(val: Date) => (val ? dayjs(val).format("YYYY年MM月DD日") : "请选择")}
</DatetimePicker>
</FormItem>
总结： 在使用新版本时，还得先了解下新版本都做了什么优化，评估下可能潜在的问题和风险。
参考资料
