forwardRef实例

下面是一个使用 forwardRef 的示例：

import React, { forwardRef } from "react";

const FancyInput = forwardRef((props, ref) => {
  return (
    <div>
      <label>{props.label}: </label>
      <input type="text" ref={ref} />
    </div>
  );
});

function Example() {
  const inputRef = React.createRef();

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

  return (
    <div>
      <FancyInput ref={inputRef} label="Name" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default Example;

在这个示例中，我们首先定义了一个名为 FancyInput 的函数组件，并使用 forwardRef 高阶函数将其转换为可以传递ref的组件。该组件接收一个名为 label 的prop，以及一个ref参数。

接下来，在 Example 组件中，我们创建了一个名为 inputRef 的ref，并将其传递给 FancyInput 组件。然后，我们创建了一个名为 focusInput 的函数，它将调用 inputRef.current.focus() 方法来将焦点设置在输入框上。

最后，在页面上展示一个标签和一个输入框，以及一个按钮，点击该按钮将触发 focusInput 函数。由于我们使用了 forwardRef，所以可以方便地通过 inputRef 引用该输入框，并对其进行操作。

总之，forwardRef 可以帮助我们向高阶组件传递ref属性，并在子组件中引用该ref，从而实现对DOM元素或其他React组件实例的访问。