让我们通俗易懂地理解React中的Refs与Refs的转发吧！

2024-01-12 22:49:08

React中的Refs介绍

React中的Refs是一种用于处理DOM元素或React组件实例的引用。它允许您在组件中存储对特定元素或组件实例的引用，以便以后可以使用它。Refs通常用于强制执行某些实例方法，例如控制input标签的焦点管理或控制视频组件(

1. 字符串引用Refs(已过时，不建议使用)

在React早期版本中，可以使用字符串类型的Refs来获取DOM元素或React组件实例的引用。这种方法已经过时，不建议再使用，因为存在一些局限性。例如，字符串引用Refs无法访问组件实例本身，只能访问组件的根DOM元素。

2. 函数引用Refs

函数引用Refs是目前推荐使用的方式。它允许您在组件中存储对DOM元素或React组件实例的引用，以便以后可以使用它。函数引用Refs的语法如下：

// 在JSX语法中使用函数引用Refs
<input type="text" ref={inputRef} />

// 在组件类中创建函数引用Refs
class MyComponent extends React.Component {
  inputRef = React.createRef();

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

3. 回调引用Refs

回调引用Refs是函数引用Refs的替代方案。它的语法如下：

// 在JSX语法中使用回调引用Refs
<input type="text" ref={ref => { this.inputRef = ref; }} />

// 在组件类中创建回调引用Refs
class MyComponent extends React.Component {
  inputRef = null;

  render() {
    return <input type="text" ref={ref => { this.inputRef = ref; }} />;
  }
}

4. 创建引用

创建引用时，可以通过React.createRef()方法来创建一个引用。这个方法返回一个特殊的对象，其中包含current属性。current属性指向DOM元素或React组件实例。

const inputRef = React.createRef();

5. 使用箭头函数

在函数引用Refs和回调引用Refs中，可以使用箭头函数来简化代码。箭头函数可以自动绑定this，因此可以简化代码，使代码更具可读性。

// 使用箭头函数简化函数引用Refs
<input type="text" ref={ref => this.inputRef = ref} />

// 使用箭头函数简化回调引用Refs
<input type="text" ref={ref => { this.inputRef = ref; }} />

Refs的转发

Refs的转发是一种将Refs从父组件传递给子组件的技术。这允许父组件访问子组件的DOM元素或React组件实例。Refs的转发语法如下：

// 在父组件中创建Refs转发
class ParentComponent extends React.Component {
  inputRef = React.createRef();

  render() {
    return (
      <div>
        <ChildComponent ref={this.inputRef} />
      </div>
    );
  }
}

// 在子组件中使用Refs转发
class ChildComponent extends React.Component {
  render() {
    return <input type="text" ref={this.props.ref} />;
  }
}

在上面的例子中，ParentComponent组件创建了一个Refs引用inputRef，并将该引用传递给ChildComponent组件。ChildComponent组件使用this.props.ref来获取父组件传递的引用，并将其赋给input标签。这样，父组件就可以访问子组件的input标签的DOM元素或React组件实例。