函数组件使用useRef

1. 函数组件使用useRef

   useRef一般用于子组件为class的组件，因为函数组件没有实例，
   因此加给函数组件是无效的，这时我们就需要借助其他一些方法。
   

   2.使用

   // 子组件
   // 引入 forwardRef, useImperativeHandle
   import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
   
   const PopUp = () => {
       ...
       ..
     // react规定，必须使用useImperativeHandle方法，来保存并抛出想要传递给父组件的方法或者数据，
     // 第一个参数是ref,第二个参数是函数，返回想要抛出的对象集合
     useImperativeHandle(ref, () => ({
       modalData,
     }));
       
       return (
           <div>
               ...
           </div>
       )
   }
   
   //必须通过forwardRef方法抛出函数组件
   export default forwardRef(Popup)
   

   import React, {
     ...
     useRef
   } from 'react'
   
   const Menu = (props) => { 
       ...
       const Modalref = useRef()
       
       const openModal = (record, type) => {
           console.log('record, type', record, type);
           // 若传递了数据，就是点击修改，其他情况为新增
           if (type === 'edit') {
             // 父组件事件函数中调起子组件的方法，将数据传递给子组件
             Modalref.current.modalData(record, type)
           } else if (type === 'add') {
             Modalref.current.modalData(null, type)
           }
           setShow(true)
        }
       return (
           <div>
               ...
               ..
               <Popup
               show={show}
               ref={Modalref}
               treeTitle={treeList}
               closeModal={closeModal} />
           </div>
       )
   }