Как передать ссылки из лица без состояния в контейнер (потеря ссылки) - PullRequest
Новая
       29

Как передать ссылки из лица без состояния в контейнер (потеря ссылки)

0 голосов
/ 28 января 2019

Текущее поведение таково, что при первом рендере я получаю ссылку, но затем заканчиваю проигрывать ее.Как мне это сделать?Я не хочу создавать контейнер только для ссылки.Спасибо

NotificationsWrapperComponent 

const NotificationsWrapperComponent = ({ items, onChangeRead, onScroll, showGradient }) => {
        return (
            <div className="panel">
                <div className="wrapper">
                    <HeaderComponent />
                    <div className="inner-wrapper" ref={ref => onScroll(ref)}>
                        <div className="arrow-up"></div>
                        <ListComponent items={items} onChangeRead={onChangeRead} />
                    </div>
                    {showGradient ? <div></div>: ''}
                </div>
            </div>
        )
    }

NotificationListContainer 

 handleScroll = ref => {
        console.log(ref) 
        const { offset } = this.state
        if (ref.clientHeight + ref.scrollTop >= ref.scrollHeight) {
            this.setState({ showGradient: true })
            this.fetchDbData(offset)
            .then(res => {
                this.onReceiveData(res)
                const _offset = offset + 1
                this.setState({ offset: _offset })
            })
        }
        this.setState({ showGradient: false })
    }

В моем контейнере я отображаю это 

 render() {
        const { notifications, showGradient } = this.state
        return (
            this.state.modalVisibility ?
            <NotificationsWrapperComponent items={notifications} onChangeRead={this.onChangeRead} onScroll={this.handleScroll} showGradient={showGradient}/>:
            null
        )
    }

ref

1 Ответ

0 голосов
/ 28 января 2019

В случае использования ссылок вместе с оберткой используйте шаблон ref forwarding .Подробнее здесь: https://reactjs.org/docs/forwarding-refs.html

...