如何在react中的封装组件中设置引用？

// 封装的组件
import React, { useRef } from 'react';

const CustomComponent = ({ setRef }) => {
  const elementRef = useRef(null);

  // 将引用传递给父组件
  setRef(elementRef);

  return <div ref={elementRef}>Hello World</div>;
};

// 父组件
import React, { useRef } from 'react';

const ParentComponent = () => {
  const childRef = useRef(null);

  // 在回调函数中接收引用
  const setChildRef = (ref) => {
    childRef.current = ref;
  };

  // 在父组件中访问子组件中被引用的元素
  const handleClick = () => {
    if (childRef.current) {
      console.log(childRef.current);
    }
  };

  return (
    <div>
      <CustomComponent setRef={setChildRef} />
      <button onClick={handleClick}>Access Child Element</button>
    </div>
  );
};

// 封装的组件
import React, { forwardRef } from 'react';

const CustomComponent = forwardRef((props, ref) => (
  <div ref={ref}>Hello World</div>
));

// 父组件
import React, { useRef } from 'react';

const ParentComponent = () => {
  const childRef = useRef(null);

  // 在父组件中访问子组件中被引用的元素
  const handleClick = () => {
    if (childRef.current) {
      console.log(childRef.current);
    }
  };

  return (
    <div>
      <CustomComponent ref={childRef} />
      <button onClick={handleClick}>Access Child Element</button>
    </div>
  );
};