Как прослушивать ивент с родителя в дочерние компоненты React Typescript?

Question

[sdgroup14]

Всем привет. Вообщем суть вопроса. Есть root компонент в котором я addEventListener('keypress') кнопки "Escape", в root компоненте есть 4 компонента в 3 из которых я должен пробросить isMenu = !isMenu(этот кейпрейсс), т.е. в 3 компонента чекаются изменения а в 1 нет. Не до конца понял redux пытался решить нативными методами - не получилось, или звезды не так стали что в голову не лезит :). Через нативные методы пробовал в root setState и в дочерних методах componentwillreceiveprops. Но почему то обновляются все 4 компонента. Работаю на Angular 2+ больше года. Там привык либо создавать new Subject() либо через и в дочернем @Input() private value: boolean
тут я так понимаю такого нет?) Подскажите пожалуйста. Желательно с примерами

https://codesandbox.io/s/awesome-sea-soyqe

Comments

[Антон Спирин]

Опубликуйте свой код в codesandbox.

[sdgroup14]

Антон Спирин, что вы хотите чтоб я выложил? 1 корневой компонент и 2 дочерних и все?

[Антон Спирин]

sdgroup14, проблемное место. Еще из описания не ясно в чем именно у вас проблема. Конкретно:
1. что меняете
2. что передаете
3. какое поведение ожидаете

[sdgroup14]

Антон Спирин, https://codesandbox.io/s/awesome-sea-soyqe

Answer 1

[Антон Спирин]

1. Обновляйте не свойство, а состояние компонента.
Component State
2. Передавайте в дочерние компоненты свойства на основе состояния:

render() {
  const { value } = this.state;
  return (
    <>
      <Child1 value={value} />
      <Child2 value={value} />
      <Child3 />
    </>
  );
}

3. В дочерних компонентах можно реагировать на обновление свойства:

componentDidUpdate(prevProps) {
  if (prevProps.value !== this.props.value) {
    this.doSomething();
  }
}

Comments

[sdgroup14]

import React, {Component} from 'react';

import './App.scss';
import KeyupTooltip from "./content/templates/keyup-tooltip/keyup-tooltip";
import ParticlesComponent from "./content/templates/particles/particles-component";


class App extends Component {

    keyPressHandle = (event) => {
        if (event.key === 'Escape') {
            console.log(this.state)
        }
    }

    componentWillMount(): void {
        document.addEventListener('keyup', this.keyPressHandle);
    }

    render() {
        const { isMenu } = this.state;
        return (
            <div>
                <ParticlesComponent/>
                <KeyupTooltip isMenu={isMenu}/>
            </div>
        );
    }
}

export default App;

[sdgroup14]

только, я только что понял что я не правильно назвал isMenu. this state это получается все состояние. А в дочернем компоненте я проверяю нужное? Подскажите пожалуйста почему у меня такие ошибки?

TypeScript error in D:/OSPanel/domains/wb-react/src/app/App.tsx(25,18):
Type '{ isMenu: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'isMenu' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. TS2322

[Антон Спирин]

sdgroup14,

interface State {
  isMenu: boolean;
}

class App extends Component<null, State> {
  state = { isMenu: true };
  
  keyPressHandle = (event) => {
    if (event.key === 'Escape') {
      this.setState(state => ({ isMenu: !state.isMenu }));
    }
  }
  
  render() { /* ... */ }
}

[sdgroup14]

Антон Спирин, понял. Спасибо. Вообщем я интерфейсы на пропсы и на стейты должен дополнительно прописывать.