Как вызвать дочерний метод для родительских событий с реагировать?

Question

У меня есть дочерний компонент, которому нужно прослушать один из его родительских компонентов event. Точнее, у меня есть функция в дочернем компоненте, которая принимает в качестве параметра event от родителя. Я хотел бы вызывать эту функцию каждый раз, когда происходит event.

В качестве примера приведем структуру:

class Parent extends React.Component {
   handleKeyDown = (event) => {
      // Call the child function doSomething()
   }

   render() {
      return (
         <input
            type="text"
            onKeyDown={this.handleKeyDown}
         >

         <Child />
      )
   }
}

class Child extends React.Component {
   doSomething = (event) => {
      // Get the event from parent
   }

   render() {
      return (
         ...
      )
   }
}

Я рассмотрел два способа сделать это:

• Использование ref для вызова дочерней функции от родителя onKeyDown (предположим, что я могу получить к ней доступ)
• Используя state, чтобы сохранить событие и передать его как props ребенку, затем прослушать props изменения с getDerivedStateFromProps.

Однако ни одно из этих решений не кажется очень привлекательным. Я также думал об использовании функции приведения, но мне нужны данные от дочернего компонента, а также event от родительского компонента ... Мне было интересно, есть ли чистый способ сделать это?

Answer 1

Вы можете написать HOC так:

const withChild = Wrapped => class Child extends React.Component {
   doSomething = (event) => {

   }

   render() {
      return (
         <React.Fragment>
            <Wrapped {...this.props} onKeyDown={this.doSomething}/>
            whatever Child should render
         </React.Fragment>
      )
   }
}

const ParentWithChild = withChild(class Parent extends React.Component {
   handleKeyDown = (event) => {
      // Call the child function doSomething()
      if (typeof(this.props.onKeyDown) === 'function') {
          this.props.onKeyDown(event);
      }
   }

   render() {
      return (
         <input
            type="text"
            onKeyDown={this.handleKeyDown}
         >
      )
   }
});

Answer 2

Попробуйте вызвать doSomething в методе render перед возвратом на основе измененных реквизитов, но это приведет к бесконечному циклу в случае изменения состояния дочернего компонента в doSomething.