陷阱

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

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

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

参考

createRef()

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

import { createRef, Component } from 'react';

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

请参阅下面的更多示例。

参数

createRef 不接受任何参数。

返回值

createRef 返回一个只有一个属性的对象

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

注意事项

  • createRef 总是返回一个*不同的*对象。它相当于您自己编写 { current: null }。
  • 在函数组件中，您可能希望使用 useRef，它总是返回相同的对象。
  • const ref = useRef() 等价于 const [ref, _] = useState(() => createRef(null))。

用法

在类组件中声明 ref

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

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

如果您现在将 ref={this.inputRef} 传递给 JSX 中的 <input>，React 将使用输入 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}>
          Focus the input
        </button>
      </>
    );
  }
}

陷阱

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

替代方案

从使用 createRef 的类迁移到使用 useRef 的函数

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

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 的调用：

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>
    </>
  );
}
上一createFactory
下一isValidElement