ReactJS: React CountUp виден только один раз в датчике видимости - PullRequest
Новая
       30

ReactJS: React CountUp виден только один раз в датчике видимости

0 голосов
/ 08 июля 2019

Я работаю над страницей с датчиком видимости, поэтому при каждом переходе к этому разделу запускается анимация. Однако мне нужно, чтобы он был виден только один раз. 

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>

В настоящее время я использую крючки и функциональные компоненты. Я искал способы установить истинное значение видимости после его просмотра.

Вывод должен стать уже видимым, а не видимым только при каждой прокрутке.

1 Ответ

0 голосов
/ 08 июля 2019

Вы, вероятно, не хотите безоговорочно переключать состояние, а просто устанавливаете его на true, как только ваш датчик видимости вызывает его onChange обратный вызов с isVisible=true

Итак, что-то вроде этого (у меня нетпроверил это): 

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

<VisibilitySensor onChange={handleVisibility}>
...