Как использовать директиву "ref" в React.js?

@bart 

Директива "ref" в React.js используется для получения ссылки на элемент DOM после его рендеринга. С помощью "ref", вы можете получить доступ к свойствам и методам элемента DOM напрямую в коде React.

Вот несколько способов использования директивы "ref":

1. С помощью коллбэка:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

  handleButtonClick = () => {
    this.myRef.focus();
  }

  render() {
    return (
      
         this.myRef = node} />
        Focus input
      
    );
  }
}

Здесь мы создаем свойство "myRef" в конструкторе и присваиваем ему значение "null". При рендеринге мы используем коллбэк, чтобы сохранить ссылку на элемент в свойстве "myRef". Затем мы используем эту ссылку в обработчике события, чтобы получить доступ к методу "focus()" элемента.

1. С помощью ссылки на экземпляр класса:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleButtonClick = () => {
    this.myRef.current.focus();
  }

  render() {
    return (
      
        
        Focus input
      
    );
  }
}

Здесь мы используем метод "React.createRef()" для создания ссылки на экземпляр класса "MyComponent". Затем мы сохраняем эту ссылку в свойстве "myRef" в конструкторе. В обработчике события мы получаем доступ к методу "current" ссылки, который содержит ссылку на элемент, сохраненный с помощью "ref".

Оба этих способа являются корректными и вы можете использовать любой из них в своем коде React.