在 ReactJS 中滚动嵌套组件答案

【问题标题】：Scrolling Nested Componentsin ReactJS在 ReactJS 中滚动嵌套组件
【发布时间】：2019-04-08 10:13:58
【问题描述】：

滚动嵌套组件时遇到问题：我已经在这里待了一个小时：/

我正在尝试在我的聊天屏幕的另一个组件中滚动列表。似乎没有办法做到这一点。 Refs 似乎没有在父级读取，如果我尝试直接访问子级，它只会获取加载 div，并且不会尝试在容器上设置 scrollTop。我希望 this.list 在条目时向下滚动。有什么想法吗？

下面的代码示例：

<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>

【问题讨论】：

{ data, loading, error, subscribeToMore, fetchMore } - 有你组件的 props 数据/状态数据吗？
查询中没有数据。

标签： reactjs react-native mongoose antd

【解决方案1】：

您可能需要一种方法来了解您的 List 组件何时可以被访问。使用componentDidMount 通知父组件。

在父组件中：

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

在List

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

【讨论】：

对它的所有调用都在 DidMount 中。