Почему добавить ref к дочернему ref может только экземпляр компонента, а не узел DOM?

Question

Я читаю этот документ, где написано:

Хотя вы можете добавить ссылку на дочерний компонент, это не идеальное решение, поскольку вы получите только экземпляр компонента, а не узел DOM. Кроме того, это не будет работать с функциональными компонентами.

кто-нибудь может объяснить почему?

Answer 1

Реагирующие ссылки - это объекты JavaScript, которые хранят ссылки на базовый элемент. Этот базовый элемент может быть другим компонентом React или элементом HTML DOM. В настоящее время React сохраняет ссылку на базовый элемент в свойство с именем current на реф. Таким образом, вы можете получить доступ к узлу DOM с помощью ссылки, если вы используете это свойство.

Например, допустим, у вас был компонент класса с объектом ref под названием "myTextInput". Начиная с React v16.3, вы обычно делаете это, помещая его в конструктор класса и вызывая createRef() метод. Затем, если этот компонент имеет метод рендеринга:

<input type="text" ref={this.myTextInput} />

Вы можете получить доступ к узлу DOM напрямую с помощью current собственность на это. Например, вы можете сосредоточить его в функции на классе, вызвав:

this.myTextInput.current.focus();

Вы будете иметь прямой доступ к узлу DOM здесь. В целом, этот компонент будет выглядеть так:

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

  focusInput = () => {
    this.myTextInput.current.focus();
  }

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

Приведенный вами абзац касается необходимости доступа к ссылкам из родительского компонента (или компонента, находящегося дальше по цепочке) в дочернем компоненте. Например, допустим, вам нужно было сфокусировать этот ввод на другом компоненте, а не на самом себе. Как бы Вы это сделали?

Допустимо назначить ссылку на пользовательский компонент, но он получит доступ только к экземпляру этого компонента. Например, скажем, у нас есть <CustomTextInput /> компонент сверху и хотел иметь возможность сосредоточить этот вход в родительском элементе. Вы можете передать ref дочернему компоненту в родительском компоненте следующим образом.

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

  render() {
    return (
      <CustomTextInput ref={this.myChildRef} />
    );
  }
}

Эта ссылка будет относиться только к экземпляру <CustomTextInput /> но это не будет относиться к основному <input /> внутри него. Вот что означает этот абзац, когда речь идет о ссылках на дочерние компоненты, ссылающиеся на экземпляры, а не на узлы DOM. Представь, что наш <CustomTextInput /> компонент имел несколько <input /> элементы внутри него. Как родительский справочник мог знать, какому входу он должен быть присвоен?

Вместо использования ссылок таким образом, в React есть несколько разных способов доступа к ссылке из родительского компонента. Начиная с React v16.3, они добавили новый API пересылки ссылок, в котором вы явно определяете классы, чтобы ожидать, что ссылки будут переданы им от родителей. До React v16.3 вы должны были создать ссылку на родительский класс и передать ее в качестве пользовательской стойки для использования в качестве ссылки на узле DOM более низкого уровня. Этот подход изложен здесь.