在组件 ReactJS 中使用 Ref

当需要从父组件中访问子组件的 DOM 元素时，可以使用 Ref。在这篇文章中，我们将详细了解如何在 ReactJS 组件中使用 Ref。

创建 Ref

要创建 Ref，首先需要在 React 组件中定义 Ref。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.refName = React.createRef();
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.refName} />
      </div>
    );
  }
}

在此示例中，我们使用 React.createRef() 方法创建了一个名为 refName 的 Ref。

注意，Ref 只能在 class 组件中使用，因为 Ref 需要组件实例的引用。

访问 Ref

一旦创建了 Ref，就可以使用 current 属性访问它所引用的 DOM 元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.refName = React.createRef();
  }
  componentDidMount() {
    console.log(this.refName.current);
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.refName} />
      </div>
    );
  }
}

在此示例中，我们在 componentDidMount() 生命周期方法中访问了 Ref 所引用的 DOM 元素。

Ref 的用途

Ref 可以用于访问子组件的 DOM 元素或方法。下面是一些使用 Ref 的示例。

1. 控制组件的焦点

可以使用 focus() 方法控制组件的焦点。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.refName = React.createRef();
  }
  componentDidMount() {
    this.refName.current.focus();
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.refName} />
      </div>
    );
  }
}

在此示例中，我们在 componentDidMount() 生命周期方法中使用 focus() 方法将焦点设置在 Ref 所引用的输入框上。

2. 访问子组件的方法

可以使用 Ref 访问子组件的方法。

class ChildComponent extends React.Component {
  someMethod() {
    console.log('Some method in child component');
  }
  render() {
    return <div>Child component</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  componentDidMount() {
    this.childRef.current.someMethod();
  }
  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

在此示例中，我们在 componentDidMount() 生命周期方法中使用 Ref 访问了子组件的方法。

总结

Ref 可以用于访问子组件的 DOM 元素或方法，通常是在需要控制组件的行为时使用。创建 Ref 可以使用 React.createRef() 方法，访问 Ref 所引用的 DOM 元素或方法可以使用 current 属性。