Прокрутка вложенных компонентов в ReactJS

Question

У меня проблемы с прокруткой вложенных компонентов: Я был в этом в течение часа: /

Я пытаюсь прокрутить список в другом компоненте для экрана чата. Кажется, нет никакого способа сделать это. Похоже, ссылки не читаются на родительском уровне, и если я пытаюсь получить доступ к дочерним элементам напрямую, он получает только загрузочный div и не будет пытаться установить scrollTop для контейнера. Я хочу, чтобы этот список прокручивался при входе. Есть идеи?

Пример кода ниже:

<div className="chatroom" style={style} ref={this.scroller}>
        <h3>Chat Example</h3>
        <Query
          query={GET_MESSAGES}
          variables={{ chatID, limit: LIMIT, cursor }}
          fetchPolicy="network-only"
        >
          {({ data, loading, error, subscribeToMore, fetchMore }) => {
            if (loading) {
              return <div style={{ height: "100%" }}>Loading</div>;
            }

            if (error) {
              return <div>Error: {error.message}</div>;
            }
            if (!unsubscribe) {
              unsubscribe = subscribeToMore({
                document: NEW_MESSAGE_SUB,
                variables: { chatID },
                updateQuery: (prev, { subscriptionData }) => {
                  const { newMessageSubscribe } = subscriptionData.data;

                  if (!newMessageSubscribe) {
                    return prev;
                  }
                  prev.getMessages.messages = [
                    ...prev.getMessages.messages,
                    newMessageSubscribe
                  ];

                  return prev;
                }
              });
            }

            return (
              <Fragment ref={this.container}>
                <Waypoint
                  onEnter={({ previousPosition }) =>
                    this.handleEnd(
                      previousPosition,
                      fetchMore,
                      data.getMessages.messages[
                        data.getMessages.messages.length - 1
                      ].createdAt
                    )
                  }
                />
                <List className="chats" ref={this.list}>
                  {data.getMessages.messages.map(message => (
                    <Message key={message.id} message={message} />
                  ))}
                  <List.Item />
                </List>
              </Fragment>
            );
          }}
        </Query>

        <InputForm chatID={chatID} />
      </div>

Answer 1

Вам может понадобиться способ узнать, когда ваш компонент List готов к доступу. Используйте componentDidMount, чтобы заметить об этом родительский компонент.

в родительском компоненте:

...
render() {
  ...
  <List className="chats" ref={this.list} onReady={this.handleListReady}>
  ...
}
...

в List

...
componentDidMount() {
  if (this.props.onReady) {
    this.props.onReady()
  }
}
...