ReactJS:React CountUp在能见度传感器中仅可见一次

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>
</ScrollContext.Provider>

我目前正在使用钩子和功能组件。我一直在寻找能够在查看后将可见性设置为 true 的方法。

输出应该已经可见，而不是只在每次滚动时都可见。

Answer 1

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

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

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>
        );
    }
}
export default myTest;

Answer 2

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

所以，像这样的东西(我还没有测试过(：

function handleVisibility(isVisible) {
!scrollStatus &&
isVisible &&
setScroll(isVisible);
}
<VisibilitySensor onChange={handleVisibility}>

Answer 3

这是一个使用反应计数和反应可见性传感器仅查看一次效果的简单示例

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>
    )
}
export default Milestones;