当用户在React中滚动到页面上的特定点时，如何隐藏元素？

useEffect(() => {
  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
  };
  
  window.addEventListener('scroll', handleScroll);
  
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

render() {
  return (
    <div>
      {scrollPosition > 500 ? <div style={{display: 'none'}}>要隐藏的元素</div> : null}
      // 其他组件内容...
    </div>
  );
}