Реагировать на вложенный компонент - PullRequest
Новая
       11

Реагировать на вложенный компонент

0 голосов
/ 24 августа 2018

Я столкнулся с проблемой, которую не знаю, как «правильно» решить.

У меня есть два компонента, назовем их parent и child.
child компонент«генерируется» вызовом функции, которая его создает, давайте вызовем эту функцию child creator.Компонент parent имеет кнопку, которая показывает / скрывает child, но также предполагает .focus() узел HTML dom, который является дочерним.Теперь показ / скрытие я реализовал с помощью состояния, но я не знаю, как применить javascript .focus() к дочернему HTML-узлу dom.

Также есть небольшая загвоздка ... компонент child«генерируется» и «возвращается» при вызове простой старой функции javascript, назовем ее createChild.

Это связано с тем, что дочерний компонент должен сильно отличаться в зависимости от того, чтопараметры, которые были переданы, однако, его также необходимо повторно использовать в приложении, поэтому функции createChild обеспечивают одинаковость всех компонентов child при одинаковых входных данных.

Я попытался передатьref создателю, однако, поскольку ref не является опорой, он недоступен.Как правильно "захватить" детские доменные узлы, чтобы .focus() их нажимать на кнопку, поскольку я не могу передать ref?

Код изолированной программной песочницы: https://codesandbox.io/s/lyj6x2948m

Ответы [ 2 ]

0 голосов
/ 24 августа 2018

Ладно, всем интересно, я нашел решение проблемы.Начнем с того, что проблема заключалась не в передаче ref (по крайней мере, явно), а в том, как создаются элементы управления (что не позволяет передать ссылку).

controlCreator функция - это старая добрая простая функция javascript, и она использовалась для предоставления типа для React.createElement, потому что результат вызова controlCreator оказывается компонентом реагирования.
Однако я пришел к пониманиюпочему это неправильно, и вместо этого приступили к генерации моих child элементов с помощью controlCreator, а затем с помощью React.cloneElement добавили им ref.Таким образом, элемент клонируется внутри родительского элемента, и на него можно ссылаться методами родителя.

Ссылка на изолированную программную среду рабочего кода

0 голосов
/ 24 августа 2018

Да, дочерний ref доступен, так как он является частью реального DOM. Я сделал простой пример с двумя вложенными компонентами, проверьте его: 

class Parent extends React.Component {
  focusRef(ref) {
    ref.focus();
  }
  
  render() {
    return <Child focusRef={this.focusRef} />
  }
};

class Child extends React.Component {
  render() {
    return (
      <button 
        ref={childRef => this.childRef = childRef}
        onMouseEnter={() => this.props.focusRef(this.childRef)}
      >
        When mouse enters, i get focused
      </button>
    );
  }  
}

ReactDOM.render(
  <Parent />,
  document.getElementById("root")
);
*:focus {
  outline: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Кроме того, я настоятельно рекомендую читать дальше реагировать на документы :

...