useImperativeHandle实现将子组件的方法暴露给父组件

对于forwardRef的讲解见我专栏的上一篇文章

forWardRef高阶组件使用 - 掘金 (juejin.cn)

本质是将子组件的方法挂载到父组件传过来的引用上

这里子组件用forward创建， 自然也就能拿到父组件传过来的引用上面了

下面上代码

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

const MyComponent = React.forwardRef((props, ref) => {
  const internalValue = useRef();

  useImperativeHandle(ref, () => ({
    getInternalValue: () => internalValue.current,
    setInternalValue: (newValue) => {
      internalValue.current = newValue;
    },
  }));

  return <div>My Component</div>;
});

const App = () => {
  const myComponentRef = useRef();

  const fetchInternalValue = () => {
    console.log(myComponentRef.current.getInternalValue());
  };

  const updateInternalValue = () => {
    myComponentRef.current.setInternalValue('New Value');
  };

  return (
    <div>
      <MyComponent ref={myComponentRef} />
      <button onClick={fetchInternalValue}>Fetch Internal Value</button>
      <button onClick={updateInternalValue}>Update Internal Value</button>
    </div>
  );
};