Question

我正在处理一个带有可见性传感器的页面，以便每当我滚动到该部分时，动画就会开始。但是，我只需要使其可见一次即可。

const [scrollStatus, setScroll] = useState(false);
    const contextData = {
        stateSetters: {
            scrollStatus
        }

    }

<ScrollContext.Provider value={contextData}>
<VisibilitySensor onChange={() => {
  setScroll(!scrollStatus);
}}>
 <CountUp start={0} end={scrollStatus ? 0 : 40} duration={1.75} suffix="+"/>
                                                        </VisibilitySensor>
</ScrollContect.Provider>

我目前正在使用挂钩和功能组件。我一直在寻找一种方法，一旦查看就可以将可见性设置为true。

输出应该已经可见，并且仅在每次滚动时才可见。

Answer 1

如dee zg所述，您可以使用事件属性“ isVisible”和属性“ active”来设置VisibilitySensor的状态，如以下示例所示。

在codesandbox上可以找到一个小的运行代码示例。

import React from "react";
import VisibilitySensor from "react-visibility-sensor";

class myTest extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      VizSensorActive: true
    };

    this.do_something = this.do_something.bind(this);
  }

   do_something(isVisible){
       if (isVisible) {
          this.setState({ VizSensorActive: false });
       }
   }
render() {
    return (
    <VisibilitySensor
      active={this.VizSensorActive}
      onChange={this.do_something}
     >
         <div>Test</div>
    </VisibilitySensor>
    );
  }

Answer 2

您可能不希望无条件地切换状态，而只是在可见性传感器使用true调用其onChange回调后，将其设置为isVisible=true

所以，这样的事情（我还没有测试过）：

function handleVisibility(isVisible) {
!scrollStatus &&
isVisible &&
setScroll(isVisible);
}

<VisibilitySensor onChange={handleVisibility}>

Answer 3

这是一个简单的示例，它使用react-countup和react-visibility-sensor仅一次查看效果

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";

function Milestones() {
  const [focus, setFocus] = React.useState(false);
  return (
            <CountUp start={focus ? 0 : null} end={150} duration={4} redraw={true}>
              {({ countUpRef }) => (
                <VisibilitySensor onChange={(isVisible) => {if (isVisible) 
                 {setFocus(true);}}}>
                 <span ref={countUpRef} />
                </VisibilitySensor>
              )}
            </CountUp>

ReactJS：React CountUp在可见性传感器中仅可见一次

3 个答案: