Как сделать многоразовую функцию в реакции

Question

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

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

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

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

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

Answer 1

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

Answer 2

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