可視性コンポーネントの小道具が発射されない - 意味的UIの反応

Question

可視性コンポーネントを使用してセマンティックUIリアクションアプリケーションで無限のスクロールを処理しようとしています。

この例は、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> 
     ); 
    } 
} 

はconsole.log文のどれもが発射されていないアプリを反応します。しかし、Semantic UI React Webページ上でコードを操作すると、console.logステートメントが期待通りに起動されます。

私には何が欠けていますか？あなたがコンポーネントのコンテナをスクロールしたときにのみ、火を可視化コンポーネントの

/* global document */ 

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

import VisibilityExample from './VisibilityExample'; 

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

Answer 1

イベント：

編集：私はindex.jsファイルで、VisibilityExampleコンポーネントをレンダリングしてるのはここです。これらのイベントはすべてデフォルトのwindow scrollイベントに基づいているためです。

ただし、指定されたコードのみを持っている場合は、スクロールバーとスクロールイベントはありません。スクロールバーとスクロールコンテンツを取得してconsole.logステートメントが実行されていることを確認するには、divを任意の高さで追加する必要があります。

は、この例を参照してください：https://codesandbox.io/s/D99mwMy9Bあなたは `VisibilityExample`コンポーネントを使用しました