Typescript ESLint Error - Как я могу печатать дочерние элементы при использовании функциональных компонентов React?

Я собираю шаблонный образец:

  • React 16.x (из приложения create-react-app)
  • Typescript
    • with functional components
  • Материал-UI
  • Mobx-React
    • via context providers
  • ESLint

У меня почти все проработано, но я не могу понять эту единственную ошибку ESLint, которую я получаю. У меня есть поставщик магазина MobX, который выглядит так

import { useLocalStore } from 'mobx-react';
import React from 'react';
import { StoreType } from '../Types/StoreType';
import { StoreContext } from './StoreContext';

export const StoreProvider = ({ children }) => {
  const store = useLocalStore(() => ({
    loginStore: { email: ['[email protected]'] },
    applicationStore: { firstName: 'neil', lastName: 'peart' }
  })) as StoreType;
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};

Я получаю сообщение об ошибке:

6:30 предупреждение Отсутствует тип возвращаемого значения для функции @ typescript-eslint / явный-тип-возврата-функции

6:33 ошибка `` дети '' отсутствует в проверке реквизитов в реакции / типах опор

Если вы хотите разобраться со всем этим, вы можете здесь: https://github.com/Savij/functional-react-mobx-material

Ценю любое понимание! -J


reactjs typescript mobx-react
person Jeff    schedule 13.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Тип возврата StoreProvider в вашем примере - это React.ReactElement, который может быть установлен следующим образом:

export const StoreProvider = ({ children }): React.ReactElement => {
    return ... 
}

Тип children в вашем исходном коде также React.ReactElement, но он должен быть заключен в интерфейс, потому что он передается как свойство свойств компонента.

export const StoreProvider = ({ children }: StoreProviderProps): React.ReactElement => {
    return ... 
}

interface StoreProviderProps {
    children: React.ReactElement;
}
person Lucas    schedule 17.12.2019
comment
Лукас - Я действительно выяснил тип возвращаемого значения функции ранее сегодня. Я добавил игнорирование в ESLint, потому что он жаловался только на: «ошибка« children »отсутствует в проверке реквизита». Я добавил response / prop-types: off и был достаточно доволен этим, поскольку он больше не показывал никаких проблем в линтере. Мне нравится ответ с интерфейсом. Добавление интерфейса к методу кажется ненормальным. Я привык думать о них в классе. Вместо этого я изменил интерфейс на тип StoreProviderProps = {...}, но я не уверен, что это повлияет на интерфейс .... - person Jeff; 18.12.2019