易犯错误

createRef 主要用于 类组件。，函数组件通常依赖于 useRef。

¥createRef is mostly used for class components. Function components typically rely on useRef instead.

createRef 创建一个可以包含任意值的 引用 对象。

¥createRef creates a ref object which can contain arbitrary value.

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

参考

¥Reference

createRef()

调用 createRef 在 类组件。 中声明一个 引用

¥Call createRef to declare a ref inside a class component.

import { createRef, Component } from 'react';

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

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

createRef 不接受任何参数。

¥createRef takes no parameters.

返回

¥Returns

createRef 返回具有单个属性的对象：

¥createRef returns an object with a single property:

  • current：最初，它被设置为 null。你可以稍后将其设置为其他内容。如果将引用对象作为 ref 属性传递给 React 给 JSX 节点，React 将设置其 current 属性。

    ¥current: Initially, it’s set to the null. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property.

注意事项

¥Caveats

  • createRef 始终返回不同的对象。此方法相当于你自己编写 { current: null }。

    ¥createRef always returns a different object. It’s equivalent to writing { current: null } yourself.

  • 在函数组件中，你可能更倾向于使用 useRef，因为它总是返回相同的对象。

    ¥In a function component, you probably want useRef instead which always returns the same object.

  • const ref = useRef() 等同于 const [ref, _] = useState(() => createRef(null))。

    ¥const ref = useRef() is equivalent to const [ref, _] = useState(() => createRef(null)).

用法

¥Usage

在类组件中声明引用

¥Declaring a ref in a class component

要在 类组件， 中声明引用，请调用 createRef 并将其结果赋值给类字段：

¥To declare a ref inside a class component, call createRef and assign its result to a class field:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

如果你现在将 ref={this.inputRef} 传递给 JSX 中的 <input>，React 将使用输入的 DOM 节点填充 this.inputRef.current。例如，你可以这样创建一个按钮来聚焦输入：

¥If you now pass ref={this.inputRef} to an <input> in your JSX, React will populate this.inputRef.current with the input DOM node. For example, here is how you make a button that focuses the input:

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}>
          Focus the input
        </button>
      </>
    );
  }
}

易犯错误

createRef 主要用于 类组件。，函数组件通常依赖于 useRef。

¥createRef is mostly used for class components. Function components typically rely on useRef instead.

备选方案

¥Alternatives

将 createRef 从类迁移到 useRef 函数

¥Migrating from a class with createRef to a function with useRef

我们建议在新代码中使用函数组件而不是 类组件。如果你有一些使用 createRef 的现有类组件，你可以按照以下方法进行转换。这是原始代码：

¥We recommend using function components instead of class components in new code. If you have some existing class components using createRef, here is how you can convert them. This is the original code:

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}>
          Focus the input
        </button>
      </>
    );
  }
}

当你用 useRef： 调用替换 createRef 调用时

¥When you convert this component from a class to a function, replace calls to createRef with calls to useRef:

import { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}
上一章createElement
下一章forwardRef