可见性组件道具不会触发 - 语义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反应

回答

相关问题