隐藏项目onScroll反应

Question

当用户在div中滚动时，我试图隐藏一个项目。显示的Card组件是一个可滚动的组件。当用户在其中滚动时，我想隐藏一个项目。做这件事最好的方法是什么？我得到了错误:太多的重新呈现。注:部分代码显示

const [scrolling, setScrolling] = useState(false);
    const handleScroll = (e) => {
      setScrolling(true);
    };
    
    return (
      <Card onScroll={handleScroll}>
        {scrolling ? null :  <p> hide me on scroll </p>}
      </Card>
    );

Answer 1

您可以做的事情是将scrolling ? null : ...移出返回，并将其保留为一个变量。

如下所示：

const [scrolling, setScrolling] = useState(false);
const handleScroll = (e) => {
  setScrolling(true);
};

const item = scrolling ? null :  <p> hide me on scroll </p>
    
return (
  <Card onScroll={handleScroll}>
    {item}
  </Card>
);