父组件对子组件元素进行操作例如，父组件是一个弹窗，子组件是弹窗中的文本，很长，有滚动条。每次关闭打开弹窗，始终恢复到文本

例如，父组件是一个弹窗，子组件是弹窗中的文本，很长，有滚动条。每次关闭打开弹窗，始终恢复到文本最开始位置，不保存上次阅读的位置。这时候可以利用 useImperativeHandle 来将所需要的操作暴露给父元素。

子组件

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

const ProtocolContent = (props) => {
  const { childRef } = props;
  const protocolContent = useRef(null)
  const toTop = () => {
    protocolContent.current.scrollTop = 0
  }
  //暴露给父组件，操作childRef的toTop方法
  useImperativeHandle(childRef, () => ({
    toTop
  }))
  return (
    <div className={styles.protocol} ref={protocolContent}>
    ...
    </div>

export default ProtocolContent

父组件

//定义一个ref，传给子组件
const protocolContent = useRef(null);

const closeModal = () => {
    // 将协议内容的滚动条到初始位置
    protocolContent.current.toTop();
  };
  
return (
 <Modal>
    <ProtocolContent childRef={protocolContent} agreementInfo={agreementInfo} />
 </Modal>
)