陷阱

createRef 主要用于 class 组件。而函数组件通常使用 useRef。

createRef 创建一个 ref 对象，该对象可以包含任意值。

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

参考

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。例如，下面这段代码演示了如何创建一个按钮，点击该按钮会将焦点聚焦在输入框上：

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          聚焦这个输入框
        </button>
      </>
    );
  }
}

陷阱

createRef 主要用于 class 组件。而函数组件通常使用 useRef。

替代方案

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

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

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          聚焦这个输入框
        </button>
      </>
    );
  }
}

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

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦这个输入框
      </button>
    </>
  );
}
上一页createFactory
下一页isValidElement

你觉得这些文档怎么样？