Использование компонента JSX внутри компонента TSX не может быть скомпилировано без сообщения об ошибке - PullRequest
Новая
       16

Использование компонента JSX внутри компонента TSX не может быть скомпилировано без сообщения об ошибке

1 голос
/ 05 марта 2020

Итак, у меня был компонент, реагирующий на машинописный текст, который называется ContractExpenses, и я использую внутри него компонент JSX, который называется DynamicSelector, однако я получаю сообщение об ошибке следующим образом:

enter image description here

Это код для моего <DynamicSelector/> компонента 

const DynamicSelector = ({ query, variables, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

Есть ли способ, я могу избежать таких ошибок, это убивает меня, чтобы использовать машинопись, потому что я должен преобразовать всех детей (и их дети!) для машинописи

1 Ответ

2 голосов
/ 05 марта 2020

Вы можете сделать опцию variables опциональной, например, присвоить ей значение по умолчанию. 

const DynamicSelector = ({ query, variables = {}, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

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

Как это 

export interface DynamicSelectorProps {
  query: any;
  variables?: any;
}


const DynamicSelector: FC<DynamicSelectorProps> = ({ query, variables, ...staticSelectorProps }) => {
  const { data, loading, error } = useQuery(query, { variables });
  if (error) return null;
  let list = [];
  if (data) {
    const key = Object.keys(data)[0];
    list = get(data, key, []);
  }
  return (
    <StaticSelector loading={loading} items={list} {...staticSelectorProps} />
  );
};

export default DynamicSelector;

Редактировать

, передавая undefined в качестве значения по умолчанию для реквизита лучше, так как он будет игнорироваться компонентом большую часть времени, что приведет к меньшему количеству ошибок, если таковые имеются.

...