Передача ref из родительского в дочерний компонент - PullRequest
Новая
       13

Передача ref из родительского в дочерний компонент

0 голосов
/ 26 октября 2018

У меня есть компонент ChatScroller для управления прокруткой в ​​чате (автоматическая прокрутка при поступлении новых сообщений).Это упрощенная версия: 

class ChatScroller extends Component {

  scrollRef = node => this.scrollNode = node

  componentDidUpdate() {
    this.scrollNode.scrollTop = this.scrollNode.scrollHeight
  }

  render() {
    return (
      <div style={{...this.props.style, overflowY: 'scroll'}} ref={this.scrollRef}>
        {this.props.children}
      </div>
    )
  }
}

И она работает, как и ожидалось, так: 

<ChatScroller>
   {messages.map(message => <ChatMessage message={message}/>}
</ChatScroller>

Теперь у меня есть другой компонент ScrollLoader для загрузки старых сообщений при прокрутке.

Проблема в том, что ему нужен доступ к тому же самому номеру ссылки, который используется ChatScroller, чтобы он мог определить, когда загружать больше сообщений.Я хотел бы сделать что-то вроде этого: 

<ChatScroller>
   <ScrollLoader handleLoad={this.handleLoad}>
      {messages.map(message => <ChatMessage message={message}/>}
   <ScrollLoader/>
</ChatScroller>

Есть идеи, как я могу получить доступ к scrollRef из обоих компонентов?Может быть, я все думаю неправильно, но каким-то образом оба компонента должны иметь доступ к элементу прокрутки ..

Любая помощь приветствуется, заранее спасибо (и извините, если мой вопрос не ясен)

1 Ответ

0 голосов
/ 26 октября 2018

решил это, сделав так: 

<ChatScroller scrollRef={this.scrollRef}>
   <ScrollLoader handleLoad={this.handleLoad} scrollRef={this.scrollRef}>
      <div ref={this.scrollRef}>
         {messages.map(message => <ChatMessage message={message}/>}
      <div>
   <ScrollLoader/>
</ChatScroller>

... все еще не уверен, что это правильный путь, но он работает.

Оставьте это для любых лучших решений, ура!

...