react hooks父组件调用子组件方法（useImperativeHandle）

useImperativeHandle

父组件

 import React, {Fragment, useEffect, useRef, useState} from "react";
 import {CustomScrollBar} from './SpringScrollBar';
 let MeetingTimePicker = (props: any) => {
     const scrollBar: any = useRef();
 
     const getChildFn = () => {
          // 调用方法
         scrollBar.current && scrollBar.current.scrollLeft(123);
     }
    return (
        <div>
        <button onClick={getChildFn}>调用方法</button>
         <CustomScrollBar ref={scrollBar}> </CustomScrollBar>
        </div>
    );
};

子组件

import React, {useEffect, useRef, useImperativeHandle, forwardRef} from 'react';

let CustomScrollBar: React.ComponentType<any> = (props: any, ref) => {

    //抛出就是暴露给父组件的方法或者属性
    useImperativeHandle(ref, () => ({
        scrollLeft: (left: number): void => {
            console.log('我被调用了', left)
        }
    }));

    return (
        <div>
        </div>
    );
};

CustomScrollBar = forwardRef(CustomScrollBar);
export {
    CustomScrollBar
};