三者用处
1.useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)
2.useImperativeHandle:在函数式组件中,用于定义暴露给父组件的ref方法。
3.React.forwardRef: 将ref父类的ref作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发父类的ref,当父类把ref挂在到子组件上时,子组件外部通过forwardRef包裹,可以直接将父组件创建的ref挂在到子组件的某个dom元素上
React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见,但在以下两种场景中特别有用:
1,转发 refs 到 DOM 组件
FormTable可以接受除了props外的ref参数
2,在高阶组件中转发 refs
外部父组件通过ref调用子组件的方法 映射到子组件的useImperativeHandle函数中
案例 : 将父组件的ref 传递给子组件
子组件:FormTable(表格上方筛选项)
通过引入forwardRef来保证能传入第二个参数 ref,从而外部父组件可以调用此子组件内部的方法。
通过引入useImperativeHandle,来定义暴露给父组件的ref方法。如外部调用fetchData,则调用了useImperativeHandle内部的fetchData,但不会调用子组件内的fetchData。所以需要在useImperativeHandle内部指向 需要调用的方法。
父组件:外部页面引入FormTable
通过引入useRef获取自定义组件所暴露出来的ref方法。将dataTableRef指向子组件FormTable。
正常参数,如api,tableConfig和渲染元素children等可以通过props传入子组件,ref=dataTableRef 通过子组件使用的forwardRef方法的 第二个参数ref传入子组件。
所以需要调用子组件内部方法的,需要将子组件暴露为forwardRef。因为这样才能传入第二个参数ref,才可以用dataTableRef.current.xxx调用子组件内部方法。