时间戳

首页 > 解决方案 > 能见度传感器不与计数器一起使用

reactjs - 能见度传感器不与计数器一起使用

问题描述

我一直在尝试与反应可见性传感器一起实现反应反击。我希望仅在该部分在视口中可见之后才显示 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>
    );
};

非常感谢您提供的帮助。谢谢

标签： reactjsgatsby

解决方案

错误是任何组件内的内容都应该在一个块内。此外，可见度传感器应从所需中导入和删除。我在 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>
    );
};

推荐阅读