react函数组件封装一个根据监听滚动条来显示隐藏按钮的方法

可以使用`useState`和`useEffect`钩子来实现监听滚动条的效果，然后根据滚动条的位置来控制按钮的显示和隐藏。

代码示例如下：

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

const ScrollButton = () => {
  const [showButton, setShowButton] = useState(false);

  useEffect(() => {
    // 监听滚动条事件
    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除滚动条事件监听
    return () => {
      window.removeEventListener('scroll', handleScroll);
    }
  }, []);

  const handleScroll = () => {
    // 获取当前滚动条的位置
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    // 当滚动条超过 200px 时显示按钮
    if (scrollTop > 200) {
      setShowButton(true);
    } else {
      setShowButton(false);
    }
  };

  const handleClick = () => {
    // 点击按钮时回到页面顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  return (
    <button 
      onClick={handleClick} 
      style={{ display: showButton ? 'block' : 'none' }}
    >
      返回顶部
    </button>
  );
};

export default ScrollButton;

在组件中，我们使用`useState`来保存按钮的显示状态，初始值为`false`。然后使用`useEffect`钩子来监听滚动条事件，并在组件卸载时移除该事件监听。

在`handleScroll`函数中，我们获取当前滚动条的位置，并根据位置来判断是否显示按钮。当滚动条超过 200px 时，将显示状态设置为`true`，否则设置为`false`。

最后，我们在组件中返回一个按钮元素，并在`style`属性中根据显示状态来设置按钮的`display`属性。当按钮显示时，点击按钮会回到页面顶部。