React - 为什么我指定scrollTop并且元素没有得到这个？

Question

I construct a chat. I want when the component load or I get new message I can to go bottom of the scroll. Without React, I tried and it's work. With React, i don't success.

Thanks for help

I already tried in JavaScript and it works, I have already tried in React with refs, like the code in JavaScript.

const contentMsgElement = document.querySelector("#contentMsg");
contentMsgElement.scrollTop = contentMsgElement.scrollHeight;

import React from 'react';
import ReactDOM from 'react-dom';
import MessageChat from './message/messageChat';
import moment from 'moment';
import MessageDateHeader from './message/messageDateHeader';

class BodyChat extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            socket:null,
            allMessages:[],
            dateNow:""
        };

        this.messageList = React.createRef();
    }

    componentDidMount()
    {
        const {socket,user} = this.props;

        this.setState({
            socket:socket,
            user:user
        },this.getLast10Msg);

        this.setState({
            dateNow:moment.utc().local().format("DD/MM/YY")
        });

        this.getNewMsg(socket);
    }

    componentDidUpdate(prevProps,prevState)
    {
        const prevAll = prevState.allMessages;
        const all = this.state.allMessages

        if(prevAll.length !== all.length)
        {
            if(this.messageList.current)
            {   
                const messageList = this.messageList.current;
                ReactDOM.findDOMNode(messageList).scrollTop = messageList.scrollHeight;
                console.dir(ReactDOM.findDOMNode(messageList));
            }
        }
    }


    getLast10Msg = () =>
    {
        const {socket} = this.state;

        socket.on("respGet10Msg",data => 
        {
            this.setState({
                allMessages:data
            });
        });
    }

  getNewMsg = socket =>
    {
        socket.on("respMsg",data => 
        {
            const newMsg = {
                userName:data.userName,
                MESSAGE:data.message,
                CODE_UTILISATEUR:data.userId,
                TIME:data.time,
                ID:(data.idMessage) ? "msg_" + data.idMessage : "tpm_" + data.idTpm
            };

            this.setState({
                allMessages:this.state.allMessages.concat(newMsg)
            });

            this.scrollToBottom();
        });
    }

    scrollToBottom = () =>
    {
        const contentMsg = this.messageList;
        console.log(contentMsg);
        contentMsg.scrollTop = contentMsg.scrollHeight;
    }
    msgDate = (time,displayDate) =>
    {
        const {dateNow} = this.state;
        const date = moment.utc(time).local().format("DD/MM/YY");
        const yesterday = moment.utc().local().subtract(1, 'days').format("DD/MM/YY");
        const currentDate = displayDate.date;
        const respDate = {...displayDate};

        if(date !== currentDate)
        {
            if(dateNow === date)
            {
                respDate.date = "Aujourd'hui";
            }
            else if(yesterday === date)
            {
                respDate.date = "Hier";
            }
            else
            {
                respDate.date = date;
            }
            respDate.display = true;
        }        
        else
        {
            respDate.display = false;
        }

        return respDate;
    }

    render()
    {
        const {allMessages,user} = this.state;
        let displayDate = {date:"",display:false};
        if(allMessages.length > 0)
        {
            const messages = allMessages.map(msg =>
            {
                const msgChat = <MessageChat 
                idMessage={msg.ID}
                userName={msg.userName}
                message={msg.MESSAGE}
                userId={msg.CODE_UTILISATEUR}
                time={msg.TIME}
                currentUser={user.CODE_UTILISATEUR}
                key={msg.ID}
                />;

                displayDate = this.msgDate(msg.TIME,displayDate);
                const msgDate = (displayDate.display) ? <MessageDateHeader date={displayDate.date}/> : "";
                return <React.Fragment>
                    {msgDate}
                    {msgChat}
                </React.Fragment>;
            }
            );

            return <div className="contentMsg" ref={this.messageList}>
                    {messages}
                    {("Aujourd'hui" !== displayDate.date) ? <MessageDateHeader date="Aujourd'hui"/> : ""}
                </div>;
        }
        else
        {
            return <div className="contentMsg">
                </div>;
        }
    }
}

export default BodyChat;

.contentMsg
    {
        display: grid;
        grid-gap: 0.2rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

I except scroll when chat mount or update at the bottom but nothing append!

@anik islam Shojib

i try and don't work

 componentDidUpdate(prevProps,prevState) { if(this.messageList) { console.log("here"); console.log(this.messageList.offsetTop); window.scrollTo({ top:this.messageList.offsetTop, behavior: "smooth" // Optional, adds animation }) console.log(this.messageList.scrollTop); } } 

Answer 1

Put an invisible div to the bottom of your chat screen. (Inside contentMsg .)

<div style={{display: none}} />

Then, Define a ref in your constructor:

this.myRef = React.createRef()

Attach this ref to your invisible div :

<div style={{display: none}} ref={el => this.myRef = el} />

Then whenever you want to scroll to bottom (eg componentDidUpdate ), call this function:

this.myRef.scrollIntoView();

Answer 2

i found the solution. I don't know why the render is not finish and call the function componentDidUpdate before. so the first time we say the render had update and it works.

I think it's a trick but if someone know a better solution.

 componentDidUpdate(prevProps,prevState) { if(this.state.allMessages.length > 0 && prevState.allMessages.length !== this.state.allMessages.length) { this.setState({ changeHeight: true }); } if(this.state.changeHeight && this.state.changeHeight !== prevState.changeHeight) { let height = ReactDOM.findDOMNode(this).scrollHeight; ReactDOM.findDOMNode(this).scrollTop = height; this.setState({ changeHeight: false }); } } 

Answer 3

here is scroll code for react. this code works for I think will for you too

 componentDidUpdate(prevProps,prevState)
    {
        const prevAll = prevState.allMessages;
        const all = this.state.allMessages

        if(prevAll.length !== all.length)
        {
            if(this.messageList.current)
            {   
                window.scrollTo({
                    top:this.messageList.offsetTop,
                    behavior: "smooth"  // Optional, adds animation
                })
                console.dir(ReactDOM.findDOMNode(messageList));
            }
        }
    }

you can use ref as like

 return <div className="contentMsg" ref={(e) => this.messageList= e} >
                    {messages}
                    {("Aujourd'hui" !== displayDate.date) ? <MessageDateHeader 
                    date="Aujourd'hui"/> : ""}
                </div>;

This is also supposed to work but didn't work for me either

  ReactDOM.findDOMNode(messageList).scrollTop = messageList.scrollHeight;

can you try one thing only run following section in your componentDidUpdate

componentDidUpdate(prevProps,prevState)
    {


                window.scrollTo({
                    top:this.messageList.offsetTop,
                    behavior: "smooth"  // Optional, adds animation
                })

    } 

and see if it works, if it does then something wrong with your condition