Как передать реквизит из несвязанного компонента

Question

Мне нужно построить таблицу, используя данные из компонента заголовка (2 раскрывающихся списка и одна кнопка «Применить»), в то время как заголовок, раздел таблицы и нижний колонтитул не связаны друг с другом. Я попытался создать массив в отдельном файле Utils, которыйзаполняется при нажатии кнопки Apply, передается как

<Table data={utils.sortArray}/>

Пока данные заполняются sortArray, когда кнопка Apply нажата в компоненте заголовка, она показывает длину 0 Still При нажатии кнопки Apply новые данные массивадолжен быть передан компоненту таблицы

Answer 1

Если вам нужно обновить таблицу на основе входных данных в заголовке, компоненты на самом деле не связаны (связаны между собой общими данными, которыми они обмениваются).

Для связи между ними вам понадобится способ передачи данных - логический подход состоит в том, чтобы иметь координаты родительского компонента между ними, так как они контекстуально осведомлены об обоих. В этом случае вы можете:

1. Передайте обратный вызов в свой компонент заголовка, который вы вызываете с необходимыми данными
2. Сохранение данных, отправленных в обратном вызове, в состоянии родителя
3. Передайте данные о состоянии в таблицу.

Например, в родительском компоненте:

state = {
  sortArray: '', // What ever your default value is
}

onSort = (sortArray) => {
  this.setState({
    sortArray,
  });
}

render() {
  ...
  <Header onSort={this.onSort} />
  ...
  <Table sortArray={this.state.sortArray} />
  ...
}

А затем вызовите onSort в заголовке с требуемым значением при необходимости.