可见性组件道具未触发 - 语义 UI React

Question

我正在尝试使用可见性组件在我的语义 UI React 应用程序上实现无限滚动。

我一直在语义 UI React 页面上关注这个例子：https://react.semantic-ui.com/behaviors/visibility#callback-frequency-example。我已将代码简化如下：

import React, { Component } from 'react';
import { Visibility } from 'semantic-ui-react';

export default class VisibilityExample extends Component {
    render() {
        return (
            <Visibility
                continuous={false}
                once={false}
                onTopVisible={() => console.log('test')}
                onTopPassed={() => console.log('test')}
                onBottomVisible={() => console.log('test')}
                onBottomPassed={() => console.log('test')}
                onTopVisibleReverse={() => console.log('test')}
                onTopPassedReverse={() => console.log('test')}
                onBottomVisibleReverse={() => console.log('test')}
                onBottomPassedReverse={() => console.log('test')}
                onPassing={() => console.log('test')}
                onPassingReverse={() => console.log('test')}
                onOnScreen={() => console.log('test')}
                onOffScreen={() => console.log('test')}
            >
                <div>Hello</div>
            </Visibility>
        );
    }
}

在我的简单 React 应用程序中，none 个 console.log 语句正在触发。但是，当我在语义 UI React 网页上操作代码时，console.log 语句会按预期触发。

我错过了什么？

编辑：这是我在 index.js 文件中渲染 VisibilityExample 组件的地方：

/* global document */

import React from 'react';
import ReactDOM from 'react-dom';

import VisibilityExample from './VisibilityExample';

ReactDOM.render(
    <VisibilityExample />,
    document.getElementById('root')
);

Answer 1

Visibility 组件的事件仅在您滚动组件的容器时触发。因为所有这些事件都是基于默认的window scroll事件。

但是如果您只有给定的代码，它不会有任何滚动条，因此不会有滚动事件。因此，您需要添加一些具有任意高度的 divs 来获取滚动条和滚动内容，以查看 console.log 语句正在触发。

看这个例子：https://codesandbox.io/s/D99mwMy9B

可见性组件道具未触发 - 语义 UI React

Visibility Component props not firing - Semantic UI React

visibility

reactjs

semantic-ui

react-redux

semantic-ui-react