我正在尝试使用可见性组件在我的 Semantic UI React 应用程序上进行无限滚动。
我一直在 Semantic 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 App 中,没有任何console.log
语句被触发。但是,当我在 Semantic 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')
);