React Final Form函数组件实现嵌套表单出现嵌套报错

这个错误是浏览器原生HTML规范校验抛出的：HTML标准明确禁止<form>元素嵌套，只要DOM树里出现一个form在另一个form内部的结构，控制台就会报这个错，和你用类组件还是函数组件写React Final Form没有关系。
你对照示例改写后出问题，核心原因是写法差异导致DOM结构变了：参考示例里的嵌套子表单（也就是你做的模态框表单），DOM结构上根本不在主form节点内部，你写函数组件的时候大概率直接把模态框JSX写在了主表单的返回结构里——哪怕模态框用fixed/absolute定位视觉上浮在最上层，只要DOM节点是主form的子节点，就会触发嵌套校验。

• 方案1：用React Portal挂载模态框
  这是最推荐的写法，完全不破坏原有表单逻辑。把模态框里的子表单通过ReactDOM.createPortal挂载到<body>节点、或者主form外层的独立容器节点上，从DOM结构上让两个form完全平级，既保留模态框的交互体验，也不会触发嵌套校验。
  核心代码示例：

  import { createPortal } from 'react-dom';
  
  // 姓名年龄收集模态框
  function UserInfoModal({ isOpen, handleSubmit, handleClose }) {
    if (!isOpen) return null;
    // 直接将模态框渲染到body节点下，和主form无嵌套关系
    return createPortal(
      <div className="modal-mask">
        <div className="modal-content">
          <form onSubmit={handleSubmit}>
            <input name="username" placeholder="请输入姓名" />
            <input name="age" type="number" placeholder="请输入年龄" />
            <div className="btn-group">
              <button type="button" onClick={handleClose}>取消</button>
              <button type="submit">确认</button>
            </div>
          </form>
        </div>
      </div>,
      document.body
    )
  }
  

• 方案2：子表单替换原生form标签
  React Final Form的状态管理完全不依赖原生form标签，你可以把模态框里子表单的外层<form>标签替换成<div>，手动调用表单实例的submit方法触发提交即可，从根源上避免form标签嵌套。注意这种写法需要额外监听输入框的回车事件，手动绑定提交逻辑，因为div默认不会响应回车触发提交。
• 避坑提示：不要尝试给内层form加form属性绑定外部表单来绕过校验，这种写法很容易和React Final Form的内部状态管理冲突，引发字段值不同步、提交事件串扰的问题。

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