createRef

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

• 参考
  • createRef()
• 用法
  • 在 class 组件中声明 ref
• 替代方案
  • 从使用 createRef 的 class 组件迁移到使用 useRef 的函数组件

参考

createRef()

在 class 组件 中调用 createRef 来声明一个 ref。

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

请看下方更多示例。

参数

createRef 不接受任何参数。

返回值

createRef 返回一个对象，该对象只有一个属性：

• current：初始值为 null，你可以稍后设置为其他内容。如果你把 ref 对象作为 JSX 节点的 ref 属性传递给 React，React 将设置其 current 属性。

注意事项

• createRef 总是返回一个 不同的 对象。这相当于你自己编写了 { current: null }。
• 在函数组件中，你可能想要使用 useRef，因为它始终返回相同的对象。
• const ref = useRef() 等同于 const [ref, _] = useState(() => createRef(null))。

用法

在 class 组件中声明 ref

要在 class 组件 中声明一个 ref，请调用 createRef 并将其结果分配给 class 字段：

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

如果你现在将 ref={this.inputRef} 传递给 JSX 中的 <input>，React 将把 input 的 DOM 节点赋值给 this.inputRef.current。例如，下面这段代码演示了如何创建一个按钮，点击该按钮会将焦点聚焦在输入框上：

替代方案

从使用 createRef 的 class 组件迁移到使用 useRef 的函数组件

我们建议在新代码中使用函数组件而不是 class 组件。如果你有一些使用了 createRef 的 class 组件，以下是如何将它们转换为函数组件。这是原始代码：

当你 将此组件从 class 组件转化为函数组件 时，用 useRef 替换 createRef 的调用：