Свойства компонента видимости не срабатывают - Semantic UI React

Я пытаюсь заставить работать бесконечную прокрутку в моем приложении 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 ни один из операторов 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')
);

person frogbandit    schedule 12.08.2017    source источник
comment
где вы использовали компонент VisibilityExample? Покажите нам также этот JS-файл   -  person Jude Niroshan    schedule 12.08.2017
comment
Попробуйте использовать другой браузер и посмотрите, есть ли обнаруженная ошибка для Google Chrome. Я не уверен, исправлено ли это прямо сейчас.   -  person Jude Niroshan    schedule 12.08.2017
comment
@JudeNiroshan только что изменил мой ответ, включив туда, где я визуализирую компонент VisibilityExample - это действительно простой файл. Я тоже пробовал в Firefox, не повезло   -  person frogbandit    schedule 12.08.2017
comment
У меня тоже не работает. И моя страница достаточно велика, чтобы вызвать полосу прокрутки.   -  person Andrew T Finnell    schedule 03.01.2018


Ответы (1)


События компонента «Видимость» срабатывают только при прокрутке контейнера компонента. Поскольку все эти события основаны на событии прокрутки окна по умолчанию. .

Но если у вас есть только данный код, у него не будет полос прокрутки, следовательно, событий прокрутки. Поэтому вам нужно добавить несколько div с произвольной высотой, чтобы получить полосы прокрутки и прокрутить содержимое, чтобы увидеть, как срабатывают инструкции console.log.

См. Этот пример: https://codesandbox.io/s/D99mwMy9B

person Tharaka Wijebandara    schedule 12.08.2017
comment
Спасибо! Теперь это работает. Знаете ли вы, можно ли обнаружить прокрутку в контейнере компонента вместо прокрутки окна? Хотел бы прокрутить, скажем, выпадающий компонент. - person frogbandit; 12.08.2017
comment
К сожалению, я не вижу context в Semantic UI React: react.semantic-ui.com/behaviors/ видимость. В то время как он присутствует в обычном семантическом пользовательском интерфейсе: semantic-ui.com/behaviors/visibility.html. Знаете ли вы, является ли это единственным способом изменить обнаружение прокрутки на компонент, а не на окно? - person frogbandit; 12.08.2017