可見性組件道具不會觸發 - 語義UI反應

我試圖讓我的語義UI React應用程序，使用可見性組件工作無限滾動。可見性組件道具不會觸發 - 語義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網頁上的代碼時，會按預期觸發console.log語句。

我錯過了什麼？

編輯：這裏是我渲染VisibilityExample組件，在index.js文件：

/* global document */ 

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

import VisibilityExample from './VisibilityExample'; 

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

來源

2017-08-12 frogbandit

你在哪裏使用'VisibilityExample'組件？向我們顯示JS文件以及 –

請嘗試使用其他瀏覽器，並查看並報告谷歌瀏覽器的錯誤。我不確定它現在是否已經修復。 –

@JudeNiroshan剛剛修改我的答案，包括我在渲染VisibilityExample組件的位置 - 這是一個非常簡單的文件。我嘗試在Firefox中，也沒有運氣 – frogbandit

能見度組件的活動只火當您滾動組件的容器。因爲所有這些事件都基於默認的window scroll事件。

但是，如果你只有給定的代碼，它將不會有任何滾動條，因此滾動事件。因此，您需要添加一些具有任意高度的div以獲取滾動條和滾動內容，以查看console.log語句正在觸發。

看到這個例子：https://codesandbox.io/s/D99mwMy9B

來源

2017-08-12 10:52:43

謝謝！它現在有效。你知道是否可以檢測組件容器中的滾動而不是窗口的滾動嗎？願意滾動說一個下拉組件。 – frogbandit

不幸的是，我沒有在Semantic UI React中看到'context'：https://react.semantic-ui.com/behaviors/visibility。鑑於它存在於常規語義UI中：https：//semantic-ui.com/behaviors/visibility.html。你知道這是否是將滾動檢測更改爲組件而不是窗口的唯一方法？ – frogbandit

看起來這不可能與可見性組件。它總是基於窗口事件和窗口屬性。看看源代碼。 https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/behaviors/Visibility/Visibility.js#L169 –

可見性組件道具不會觸發 - 語義UI反應

回答

相關問題