如何在 React.createRef() 方法上设置初始值？

Question

我使用当前滚动值的 ref 管理组件中的滚动。我不能使用 state 和 setState，因为当用户滚动时，setState 方法会使事情变得非常不稳定和不可能。因此，我决定使用不重新渲染组件的 refs，而是在组件重新渲染时保存值。我的问题是我无法为 ref 设置初始值。因为我使用的是 class 组件，所以我不能使用简单的 useRef 反应挂钩，它允许轻松设置初始值...相反，我使用 React.createRef() 但是当我将值放在括号中时() 它似乎没有注册它并且在用户滚动之前是未定义的。我该如何解决？

在这里，当组件更新时（例如发送新消息时），我想确保只有当用户没有在上面某处浏览旧消息时，它才会向下滚动到最新消息。

Answer 1

要设置由 React.createRef 创建的引用的初始值，请执行如下操作：

constructor(props) {
  super(props):

  this.scrollPosition = React.createRef();
  this.scrollPosition.current = 201;
}

不过我确实想提一下，因为您在 class 组件中，所以您可能不需要参考。在函数组件中，refs 的使用方式通常与您使用它们的方式相同：拥有一个从渲染到渲染持续存在的可变对象。

但是在 class 组件中，您已经拥有一个从渲染持续到渲染的可变对象：this。所以你可以放弃 ref 而只是做：

constructor(props) {
  super(props);
  this.scrollPosition = 201;
}

componentDidUpdate(prevProps, prevState) {
  if (This.state.message === "" && this.scrollPosition > 200) {
    // ...
  }
}

如何在 React.createRef() 方法上设置初始值？

how to set an initial value on React.createRef() method?

javascript

reactjs

use-ref