如何在UseEffect中向UseRefs添加事件侦听器

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

const MyComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked!');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button ref={buttonRef}>Click me</button>
  );
};

export default MyComponent;