如何在reactjs返回語句中設置滾動條高度？

Question

我目前在設置滾動條的高度時遇到問題。 我發現了一些方法可以使用javascript設置滾動條的高度，但是由於我正在使用reactjs，因此它不適用於我的程序。

我有一個聊天系統，其中包含可滾動的聊天框。 每次呈現頁面時，聊天框中的消息都會設置到聊天框中：

    render() {

         return (

              /*... irrelevant code ...*/

                    <div id = "chat">
                        <div id = "chatBox" className = "chatBox">
                            <AllChatMessages allMessages = {this.props.allMessages} />
                        </div>
                        <form id="chatForm" action = "#">
                            <input id = "chatInput" autoComplete="off" ></input>
                            <button id = "chatSend" type="submit">Send</button>
                        </form>
                    </div>

              /*... more irrelevant code ... */

        );
    }

我目前有用於“聊天框”的CSS，如下所示：

    #chatBox{
        position: relative;
        order: 0;
        width: 42.6em;
        height: 9.7em;
        border: 2px solid #2f5f6f;
        border-radius: 0.5em;
        padding: 10px;
        padding-top: 5px;
        text-align: left;
        margin: 1em;
        margin-bottom: 0em;
        overflow-y: auto;
        word-wrap: break-word;
    }

    .chatBox::-webkit-scrollbar{
        width: 15px;
    }

    .chatBox::-webkit-scrollbar-track{
        box-shadow: inset 0px 0px 10px #2f5f6f; 
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    } 

    .chatBox::-webkit-scrollbar-thumb {
        background: rgba(47,95,111,0.8); 
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    .chatBox::-webkit-scrollbar-thumb:hover{
        background: rgba(47,95,111,1);
    }

由於chatbox僅在我將代碼塊返回到我的網站后才存在，因此在我看來（並且我已經嘗試了幾種方法），沒有JavaScript可用於將滾動條的高度設置為底部（因為任何JavaScript必須在return語句之前）。

有什么辦法可以某種方式自動將滾動條的高度設置到底部嗎？ 也許我可以用CSS做到這一點？

Answer 1

您可以在react中調用渲染后運行javascript。 您必須將要運行的代碼包含在與渲染相同的類的componentDidMount()函數中。

我認為您正在嘗試將可滾動內容的位置設置為內容的底部。 您可以使用scrollTop和scrollHeight做到這一點。

class MyComponent extends Component {
     componentDidMount() {
          let chatBox = document.getElementById('chatBox');
          chatBox.scrollTop = chatBox.scrollHeight;
     }

     render() {...}
}