Как получить ref’ы нескольких компонентов?

В React, ref'ы позволяют получить прямой доступ к DOM-узлам или экземплярам компонентов. По умолчанию, ref'ы могут быть привязаны только к одному компоненту или элементу. Однако, если вам нужно получить ref'ы для нескольких компонентов, вам потребуется использовать различные подходы, которые подходят для конкретных случаев.

1. Массив ref'ов:
Если вам нужно получить ref'ы для нескольких элементов одного типа, вы можете создать массив ref'ов и добавить каждую ссылку в массив. Например, чтобы получить ref'ы для нескольких <input> элементов внутри компонента, вы можете создать массив ref'ов и назначить каждый элемент массива ref'у каждого <input>:

   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.inputRefs = [];
     }

     setInputRef = (ref, index) => {
       this.inputRefs[index] = ref;
     }

     render() {
       return (
         <div>
           <input ref={ref => this.setInputRef(ref, 0)} />
           <input ref={ref => this.setInputRef(ref, 1)} />
           <input ref={ref => this.setInputRef(ref, 2)} />
         </div>
       );
     }
   }

Теперь вы можете получить доступ к каждому ref'у, обращаясь к элементу соответствующего индекса в массиве ref'ов.

2. Callback ref'ы:
Callback ref'ы предоставляют еще один способ получить ref'ы нескольких компонентов. Этот подход более гибкий, так как он позволяет выполнять произвольный код при изменении ref'а. Для создания callback ref'а, вы можете передать функцию в атрибут ref элемента. Например, чтобы получить ref'ы для нескольких <input> элементов, вы можете создать callback функцию и привязать ее к каждому <input>:

   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.inputRefs = [];
     }

     setInputRef = (ref, index) => {
       this.inputRefs[index] = ref;
     }

     render() {
       return (
         <div>
           <input ref={ref => this.setInputRef(ref, 0)} />
           <input ref={ref => this.setInputRef(ref, 1)} />
           <input ref={ref => this.setInputRef(ref, 2)} />
         </div>
       );
     }
   }

Теперь вы можете получить доступ к каждому ref'у, обращаясь к соответствующей ячейке в массиве ref'ов.

3. React.createRef():
В React 16.3+ появился новый API React.createRef(), который предоставляет более простой и предсказуемый способ работы с ref'ами. Вы можете создать ref с помощью React.createRef() и привязать его к компоненту или элементу. Например, чтобы получить ref'ы для нескольких <input> элементов:

   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.inputRefs = [
         React.createRef(),
         React.createRef(),
         React.createRef()
       ];
     }

     render() {
       return (
         <div>
           <input ref={this.inputRefs[0]} />
           <input ref={this.inputRefs[1]} />
           <input ref={this.inputRefs[2]} />
         </div>
       );
     }
   }

Теперь вы можете получить доступ к каждому ref'у, обращаясь к свойству current соответствующего ref'а. Например:

   const input1 = this.inputRefs[0].current;
   const input2 = this.inputRefs[1].current;
   const input3 = this.inputRefs[2].current;

Обратите внимание, что ref'ы, созданные с помощью React.createRef(), автоматически становятся доступными в свойстве current после монтирования компонента или обновления состояния.

Таким образом, есть несколько способов получить ref'ы нескольких компонентов в React. Вы можете использовать массив ref'ов, callback ref'ы или API React.createRef() в зависимости от ваших потребностей и версии React, которую вы используете.