反应 forwardRef - JavaScript

在React中，forwardRef是一种用于转发refs到组件中的技术。当您需要使用refs引用组件中的DOM元素或基于用户操作对其进行操作时，这很有用。

forwardRef使组件可以响应ref，它接受一个组件并返回另一个新组件。新组件可以直接访问父组件中ref属性的值。

import React from "react";

const MyComponent = React.forwardRef((props, ref) => {

  return <div ref={ref}>{props.children}</div>;
});

const ParentComponent = () => {

  const myComponentRef = React.createRef();

  return (
    <div>
      <MyComponent ref={myComponentRef}>Hello World!</MyComponent>
    </div>
  );
};

在上面的代码中我们定义了一个MyComponent组件，并使用forwardRef方法将其包装起来。现在，MyComponent可以使用自己的refs属性，并通过ref参数向其父组件暴露出去。在ParentComponent中我们使用createRef创建了myComponentRef引用，并将其传递给MyComponent作为ref属性。

当MyComponent被挂载时，myComponentRef将接收对组件实例的引用，然后使用该引用可以操作组件的props、状态以及DOM节点等。

此外，forwardRef还支持包装用类声明的组件。

import React from "react";

class MyComponent extends React.Component {
  render() {
    const { forwardRef } = this.props;
    return <div ref={forwardRef}>{this.props.children}</div>;
  }
}

export default React.forwardRef((props, ref) => {
  return <MyComponent {...props} forwardRef={ref} />;
});

const ParentComponent = () => {

  const myComponentRef = React.createRef();

  return (
    <div>
      <MyComponent ref={myComponentRef}>Hello World!</MyComponent>
    </div>
  );
};

在上面的代码中，MyComponent包装在forwardRef内，并被导出。我们将MyComponent传递给forwardRef作为参数，并返回包装它的匿名组件。在MyComponent中，我们通过传入的forwardRef props属性接收了ref，并将其应用于DOM元素的ref属性。

在ParentComponent中，我们创建了一个指向MyComponent的引用，并将其传递给MyComponent的ref属性中。在MyComponent挂载后，我们可以通过myComponentRef引用访问MyComponent实例的方法和属性。

这就是forwardRef的基本使用方法。forwardRef可以帮助我们更容易地向组件中传递ref属性，使得在react中操作DOM变得简单易用。