在 ReactJS 中滚动嵌套组件

Posted 2023-03-11

【中文标题】在 ReactJS 中滚动嵌套组件

【英文标题】：Scrolling Nested Componentsin 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 数据/状态数据吗？

查询中没有数据。

【参考方案1】：

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

在父组件中：

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

...

在List

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

...

【讨论】：

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