javascript - 从 Reactjs 中制作 div 滚动

Question

我是 React 的新手，我希望 div 在它开始溢出时向上滚动，我正在尝试通过 React 以正确的方式做到这一点，但似乎无法弄清楚。

我的渲染方法中有以下内容:

render:function(){

    return (
      <div className="main">
        <div className="title">talkin folk</div>
        <div className="chatBox">
          <div className="chatRooms">
            <p className="large">rooms</p>
            {this.arrayOfRooms}
          </ div>
          <div className="typingBox">
            <div ref='dialog' key='dialog' className="dialog"> // div to scroll
              {this.arrayOfMsgToRender}
            </div>
            <div className="userType">
              <input
                type="text"
                placeholder="You:"
                label="email"
                value={this.state.msg}
                onChange={this.handleInput}
              />
            <input id="doneButton" type="submit" value="send" onClick={this.handleSend} />
            </div>
          </ div>
        </ div>
      </ div>
    );
  }

在上面的代码中，它是 div 对话框，我希望它在开始溢出时自动向上滚动。

我尝试做类似的事情:

componentDidUpdate: function() {
  var node = this.getDOMNode('dialog');
  node.scrollTop = node.scrollHeight;
},

但这行不通

Answer 1

为了访问 React 组件中的 DOM 节点，您可以这样做:

假设你有一个 <div ref = "hello">Hello World.</div>

您可以通过以下方式访问此 DOM 节点:this.refs.hello .

唯一需要注意的是这只适用于 HTML 元素，不适用于 React 元素。对于 React 元素，您需要使用 this.getDOMNode(this) ，并解决它。