Датчик видимости не работает с контратаком

Question

Я пытался реализовать реакцию противодействия вместе с датчиком реакции-видимости. sh я хочу показать couterup только после того, как этот раздел виден в окне просмотра. Итак, используя датчик видимости, чтобы загрузить его. Но это не работает, и ниже приведена ошибка

"Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но есть: объект."

Пример кода ниже

import React from 'react';
import CountUp, { startAnimation } from 'react-countup';

const CounterSection= (props) => {
    const VisibilitySensor = require('react-visibility-sensor');
    function onChange(isVisible) {
        console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    }
    return (
        <div>
            <VisibilitySensor onChange={onChange}>
                <div>...content goes here...</div>
                <CountUp start={0} end={9350} duration={5} />+
            </VisibilitySensor>
        </div>
    );
};

Помощь в этом очень ценится. Спасибо

Answer 1

Как указывал предыдущий автор, вы импортируете библиотеку неправильно, импортируйте ее с помощью оператора import в верхней части компонента. Использование ES5 require правильно для Node / Express, но не для React.

Вам не нужно вручную обрабатывать onChange, это очевидно более старый способ заставить работать две библиотеки друг с другом. Проверьте этот ответ , относящийся к использованию VisibilitySensor и CountUp. Я только что проверил, и это работает для меня.

Answer 2

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

import CountUp, { startAnimation } from 'react-countup';
import VisibilitySensor from 'react-visibility-sensor';

const CounterSection= (props) => {

    function onChange(isVisible) {
        console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    }
    return (
        <div>
            <VisibilitySensor onChange={onChange}>
                <div>
                   <div>...content goes here...</div>
                   <CountUp start={0} end={9350} duration={5} />+
                </div>
            </VisibilitySensor>
        </div>
    );
};