Antd之Modal中forceRender引发的惨案

主要记录一下antd使用过程modal过程中，forceRender引发的一个bug，以及相关的几个属性：z-index、getContainer

forceRender是干什么的？

forceRender是modal中一个属性，用于强制渲染modal

为什么使用forceRender？

原因：

一年前项目初建的时候，antd版本4.0，在使用
hooks const [form] = Form.useForm()时，明明我已经绑定确定的Form，却还是出现如下错误：

Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?

分析：

我在Form外层包裹了Modal（Drawer同理）组件，在调用form的实例时，Modal内部的组件并未渲染，才导致了如此错误。

    const [form] = Form.useForm();
    useEffect(() => {
      form.setFieldsValue({...Modal})
    }, [form])
    <Modal>
      <Form form={form} />
    </Modal>

解决方案

强制Modal渲染
监听Form是否渲染

方案一：强制Modal渲染，通过antd提供的forceRender属性即可，

    const [form] = Form.useForm();
    
    useEffect(() => {
      form.setFieldsValue({...formValues})
    }, [form])
    
   // Modal
    <Modal forceRender>
      <Form form={form} />
    </Modal>

方案二：监听Form是否渲染

    const [form] = Form.useForm();
    const formRef = useRef(null);
    
    useEffect(() => {
      if (formRef.current) {
         form.setFieldsValue({...formValues})
      }
    }, [form])
    
   // Modal
    <Modal forceRender>
      <Form form={form} ref={formRef}/>
    </Modal>

问题产生的原因：

经过调试发现，因为forceRender会提前渲染Modal，从而会优先插入到body中并渲染，以至于弹窗出现在了弹窗的底下，被盖住了。猜测根本原因是：antd版本升级过程中，forceRender底层原理可能改动，导致该问题的出现。另外，使用antd过程中，如果出现多个modal，不要自定义z-index，使用系统自带的方便控制层级，如果自定义，可能会出现混乱，从而再次导致modal被覆盖问题。
还有就是，因为modal默认是插入到body中，如果要插入到当前节点，可以使用getContainer控制。