Блог

Я новичок в react-материалах. Структура моего кода выглядит следующим образом:

 App - Calls - CallsChart - chart1
                         - chart2
                         - ...
    - Home  - HomeCharts - chart3
                         - chart4 ...
    - filter bar
    - type bar
    - navigation bar
  

Таким образом, каждая панель мониторинга (вызовы, главная страница …) имеет столбцы и диаграммы внутри. Но когда пользователь нажимает на диаграмму, чтобы сгенерировать новый фильтр, мне нужно, чтобы это значение распространялось из chart1 — CallsChart — Calls — App — filter bar. Я передаю эти параметры в props. Например:

 //get filter
clickFilter(filter){
    this.props.chartFilter(filter);
}
  

Но мне нужно определить эти базовые функции на каждом уровне пути вверх (и вниз). Как я могу сделать эти функции повторно используемыми? Определите их только один раз и используйте на каждой панели мониторинга? Я выяснил, что у react нет наследования, но он использует композицию. Я не могу этого сделать, потому что я просто передаю параметр parent.

Как сказал Дюпокас, вы можете обернуть все свои компоненты в компонент верхнего уровня, который управляет вашим состоянием. Но также, если это не является вашим предпочтением для вашего приложения, вы можете использовать React Redux для управления состоянием приложения как единым состоянием, изменяемым только действиями. Вы можете узнать больше о использовании React Redux.

Наследование в react осуществляется иерархически, если вам нужно распространить состояние на другие компоненты, элегантным решением было бы обернуть ваши компоненты в родительский компонент с сохранением состояния. Таким образом, вы извлекаете все необходимые данные, а затем распространяете их среди дочерних элементов через props .