多组件互相转发ref共享组件内部数据

在开发中可能会遇到这种场景：在父组件中有两个子组件。组件A和组件B。组件A想要拿到组件B内部的数据或方法，同时组件B也可能会想要拿到组件A内部的数据或方法。为了保证父组件的代码及整洁规范。不允许使用传递参数形式发送到父组件。

import React, { memo, useEffect, useRef } from "react";

import type { FC } from "react";
import Son from "./Son";
import Son2 from "./Son2";

const Index: FC<any> = memo(() => {
  const testRef1 = useRef();
  const testRef2 = useRef();

  return (
    <div>
      <h1>多组件互相转发ref进行共享组件内部数据</h1>
      <Son ref={testRef1} testInstance={testRef2} />
      <Son2 ref={testRef2} test2Instance={testRef1} />
    </div>
  );
});

export default Index;

import React, { forwardRef, memo, useEffect, useImperativeHandle } from "react";

import type { FC } from "react";

const Son: FC<any> = memo(
  forwardRef((props, ref) => {
    const { testInstance } = props;

    useImperativeHandle(ref, () => {
      return {
        name: "fs",
      };
    });

    return (
      <div>
        <h1>Son</h1>
        <button
          onClick={() => {
            console.log(testInstance.current);
          }}
        >
          我是son组件，son2组件内部转发了ref，并且将转发了的ref传递(props)给了son组件。现在我可以直接拿到son2转发过来的内容
        </button>
      </div>
    );
  })
);

export default Son;

import React, { forwardRef, memo, useImperativeHandle } from "react";

import type { FC } from "react";

const Son2: FC<any> = memo(
  forwardRef((props: { test2Instance: React.MutableRefObject<any> }, ref) => {
    const { test2Instance } = props;
    useImperativeHandle(ref, () => {
      return {
        age: 18,
      };
    });

    return (
      <div>
        <h1>Son2</h1>

        <button
          onClick={() => {
            console.log(test2Instance.current);
          }}
        >
          我是son2组件，son组件内部转发了ref，并且将转发了的ref传递给了son2组件。现在我可以直接拿到son转发过来的内容
        </button>
      </div>
    );
  })
);

export default Son2;