React Hooks TypeScript наследует родительское состояние и типы функций в дочерних - PullRequest
0 голосов
/ 19 июня 2020

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

У меня есть родительский компонент следующим образом:

const TagPopupModal: React.FC = () => {
// state
  const [addTagPressed, setAddTagPressed] = useState<boolean>(false);
  const [tagList, setTagList] = useState<userTagType['tags'][]>(
    [],
  );

// function
  function addToTagList(tag: tagListType) {
   ...
  }

return (
  ...
  <TagListView 
    addTagPressed={addTagPressed}
    tagList={tagList}
    addToTagList={addToTagList}
  />
)
}

В родительском компоненте я определил типы состояния и тип параметра для функции. Они передаются дочернему компоненту.

Теперь в дочернем компоненте у меня есть следующее:

interface PropTypes {
  addTagPressed:boolean;
  tagList: Array<userTagType['tags']>;
  addToTagList: (value: taglistType) => void;
}

const TagListView: React.FC<PropTypes> = ({
  addTagPressed, 
  tagList,
  addToTagList,
}) =>{
   ...
}

Как видите, мне пришлось снова определить те же типы для свойств, но с использованием интерфейса в дочернем компоненте. Это требует много времени, есть ли способы напрямую наследовать типы состояния и функций от родителя?

Какой способ был бы наиболее эффективным?

Спасибо,

1 Ответ

0 голосов
/ 19 июня 2020

Вы можете экспортировать свой интерфейс для PropTypes и использовать его в другом месте, например, как const [tagList, setTagList] = useState<PropTypes['tagList']>([]);

Вы не обязательно сэкономите много необработанного затирания клавиатуры, но это поможет сохранить ваши типы согласованными и повторно используемыми.

import { TagListView, PropTypes } from '../TagListView';

const TagPopupModal: React.FC = () => {
// state
  const [addTagPressed, setAddTagPressed] = useState(false);
  const [tagList, setTagList] = useState<PropTypes['tagList']>(
    [],
  );

// function
  const addToTagList: PropTypes['addToTagList'] = (tag) => {
   ...
  }

return (
  ...
  <TagListView 
    addTagPressed={addTagPressed}
    tagList={tagList}
    addToTagList={addToTagList}
  />
)
}

Обратите внимание, что вам не нужно проявлять особую бдительность при объявлении явных типов в целом. Например, useState(false) автоматически определит тип этого состояния как boolean. И если вы объявите функцию addToTagList как константу и установите для нее тип, который определен в PropTypes, TS автоматически узнает, что параметр tag должен иметь заданный тип.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...