TypeScript: как отфильтровать данные, которые находятся в отдельном компоненте к функции фильтра - PullRequest
Новая
       6

TypeScript: как отфильтровать данные, которые находятся в отдельном компоненте к функции фильтра

0 голосов
/ 29 января 2020

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

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

1 Ответ

0 голосов
/ 29 января 2020

Способ обработки такого типа межкомпонентной связи в React - через управление состоянием. И один из самых простых способов сделать это - поднять состояние в родительский компонент. Родительский компонент хранит состояние и делит его с дочерними по мере необходимости. Когда состояние изменяется, компонент повторно визуализируется, и новое состояние передается дочерним компонентам, которые затем также повторно визуализируют.

Простой пример родительского компонента может выглядеть следующим образом. 

function ParentComponent(){
  [records, setRecords] = useState(profiles);

  const filterRecords = (filterString) => {
    const filtered = _.filter(records, r => r.name.indexOf(filterString) >= 0);
    setRecords(filtered);  //This will trigger a re-render
  }

  return (
    <table>
      <TableHeader onFilter={filterRecords} />
      <TableBody records={records} />
    </table>
  );
}

TableHeader может выглядеть примерно так: 

function TableHeader({onFilter}){
  return (
    <thead>
      <tr>
        <td>
          <button onClick={() => onFilter("billy")}>Filter Me</button>
        </td>
      </tr>
    </thead>
  );
}

А компоненты TableBody могут выглядеть примерно так: 

function TableBody({records}){
  return (
    <tbody>
        {_.map(records, record => <tr><td>{record.name}</td></tr>)}          
    </tbody>
  );
}

С эта структура (если я подключил все точки псевдокода), нажатие кнопки filter me в заголовке скажет родительскому компоненту отфильтровать записи и обновить его состояние, что вызовет повторную попытку. рендер, в результате чего тело также обновляется.

...