0 

const modal =({messages})=>{
    
   const messagesEnd = React.useRef(null);

   const scrollToBottom = () => {
        
        messagesEnd.current.scrollIntoView({ behavior: "smooth" });
    };
  
   useEffect(() => {
          
          scrollToBottom();
        
    }, []); 
    
    const messagesComp = (single_message)=>{
        <TableRow>
        <div>
        <p>{single_message}</p>
        </div>
        </TableRow>
    }
    return (
       
        <div>
        <Table>
        <TableBody>
        {messages ? messages.map(item, index => {
            if(messages.length === index+1){
               return  <div ref={messagesEnd}>messagesComp(item)</div>    
            }else{
                messagesComp(item)
            }
        }
        ) : null}
        </TableBody>
        </Table>
        </div>
            
    );
}

我已经制作了一个应用程序，如果您单击一个按钮，则会弹出一个模式，并且在该模式上会有表格行形式的评论，随着评论的增加，用户必须向下滚动所有内容，我希望它随着模态组件的安装自动滚动。我用过material-ui。我通过 ref 进行了尝试，还尝试了此处可用的其他代码，但它仍然向我显示此错误。

4

1 回答 1

0

您的问题是您的渲染有两个不同的路径，但其中只有一个设置元素引用：

if(messages.length === index+1){
    return  <div ref={messagesEnd}>messagesComp(item)</div>    
} else {
    messagesComp(item)
}

甚至还有第三条路径，其中消息为空，您也不会获得参考集。

没有引用，当useEffect被调用时（无论你以哪种方式呈现它都会发生），它不会有一个存储在messagesEnd.current.

为了解决这个问题，您需要始终在渲染中包含元素引用，这似乎不是您想要的效果，或者在使用引用之前检查有效性：

const scrollToBottom = () => {
    if (messagesEnd && messagesEnd.current) {
        messagesEnd.current.scrollIntoView({ behavior: "smooth" });
    }
};
于 2020-01-13T13:19:52.533 回答