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

【问题标题】：how to set an initial value on React.createRef() method?如何在 React.createRef() 方法上设置初始值？
【发布时间】：2021-10-06 09:18:07
【问题描述】：

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

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

【问题讨论】：

this.scrollPosition.current = 201，在你创建它之后。
能否提供您的渲染和构造函数代码？
AFAIK 将参数传递给 createRef 不会改变任何东西。使用 ref 属性初始化 Refs
@MartinGodzina 我已经从 cmets 获得了解决方案。我的渲染方法太大而无法粘贴到这里。我认为你是对的，我认为 createRef 方法甚至不会等待任何参数。
请把图片去掉，换成代码的文字。

标签： javascript reactjs use-ref

【解决方案1】：

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

constructor(props) {
  super(props):

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

我确实想提一下，因为你在一个类组件中，你可能不需要一个 ref。在函数组件中，引用通常以您使用它们的方式使用：拥有一个可变对象，该对象在渲染之间持续存在。

但在类组件中，您已经拥有一个可变对象，该对象在渲染之间持续存在：this。因此，您可能可以放弃 ref 并执行以下操作：

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

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

【讨论】：