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

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 应用程序中，没有一个console.log语句被触发。但是，当作语义 UI React 网页上的代码时，console.log语句会按预期触发。

我错过了什么？

编辑：这是我在index.js文件中渲染可见性示例组件的地方：

/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import VisibilityExample from './VisibilityExample';
ReactDOM.render(
<VisibilityExample />,
document.getElementById('root')
);

Answer 1

可见性事件组件仅在滚动组件的容器时触发。因为所有这些事件都基于默认窗口滚动事件。

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

请参阅此示例：https://codesandbox.io/s/D99mwMy9B