Question

我是React的新手。发送新的消息而不使用选择器时，有什么方法可以实现将聊天窗口滚动到底部？

代码如下：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class ChatWindow extends Component {

  componentDidUpdate() {
    document.querySelector('.chat-window').scroll(0, 999);
  }

  render() {
    const mappedMessages = this.props.messages.map((item) => {
      return <p key={item._id} className="message light-grey">
        <Link className="link" to=''>{item.author}:</Link> 
        {item.msg}
      </p>
    });

    return <div className="chat-window">
      {mappedMessages}
    </div>
  }
};

Answer 1

您可以尝试使用Refs功能。

因此，您可以使用ref创建一个React.createRef()。然后，您只需要将其作为ref属性分配给所需的元素即可。之后，您可以通过创建的参考的current属性访问节点参考。

如果您使用的React早于16.3，请考虑检查callback refs。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class ChatWindow extends Component {
  constructor(props) {
    super(props);

    this.chatRef = React.createRef();
  }

  componentDidUpdate() {
    this.chatRef.current.scroll(0, 900)
  }

  render() {
    const mappedMessages = this.props.messages.map((item) => {
      return <p key={item._id} className="message light-grey">
        <Link className="link" to=''>{item.author}:</Link>
        {item.msg}
      </p>
    });

    return <div className="chat-window" ref={this.chatRef}>
      {mappedMessages}
    </div>
  }
};

不使用DOM选择器在React中实现滚动功能

1 个答案: