当我使用钩子点击react中的h1 tag时，如何获得另一个组件？

// Parent.js
import React from 'react';
import Child from './Child';

function Parent() {
  const anotherComponent = <AnotherComponent />; // 另一个组件
  
  return (
    <div>
      <Child anotherComponent={anotherComponent} />
    </div>
  );
}

export default Parent;

// Child.js
import React from 'react';

function Child(props) {
  const { anotherComponent } = props;
  
  // 使用另一个组件
  return (
    <div>
      {anotherComponent}
    </div>
  );
}

export default Child;

// AnotherComponentContext.js
import React from 'react';

const AnotherComponentContext = React.createContext();

export default AnotherComponentContext;

// Parent.js
import React from 'react';
import Child from './Child';
import AnotherComponentContext from './AnotherComponentContext';

function Parent() {
  const anotherComponent = <AnotherComponent />; // 另一个组件
  
  return (
    <AnotherComponentContext.Provider value={anotherComponent}>
      <Child />
    </AnotherComponentContext.Provider>
  );
}

export default Parent;

// Child.js
import React from 'react';
import AnotherComponentContext from './AnotherComponentContext';

function Child() {
  return (
    <AnotherComponentContext.Consumer>
      {(anotherComponent) => (
        <div>
          {anotherComponent}
        </div>
      )}
    </AnotherComponentContext.Consumer>
  );
}

export default Child;

import React, { useRef } from 'react';

function Parent() {
  const anotherComponentRef = useRef(null); // 创建一个ref
  
  const handleClick = () => {
    // 使用另一个组件的实例或DOM元素
    console.log(anotherComponentRef.current);
  };
  
  return (
    <div>
      <h1 onClick={handleClick}>Click Me</h1>
      <AnotherComponent ref={anotherComponentRef} /> // 另一个组件
    </div>
  );
}

export default Parent;