Typescript ESLint 錯誤 - 使用 React 功能組件時如何輸入子項？

Question

我正在整理一個樣板樣本：

• React 16.x（來自 create-react-app）
• 打字稿
  • 帶功能組件
• 材質界面
• Mobx-React
  • 通過上下文提供者
• 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: ['neil.peart@rush.yyz'] },
    applicationStore: { firstName: 'neil', lastName: 'peart' }
  })) as StoreType;
  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};

我收到錯誤：

6:30 警告缺少函數 @typescript-eslint/explicit-function-return-type 的返回類型

6:33 錯誤“兒童”在道具驗證反應/道具類型中丟失

如果你想把整個事情拉下來，你可以在這里： https : //github.com/Savij/functional-react-mobx-material

欣賞任何見解！ -J

Answer 1

您的示例中StoreProvider的返回類型是React.ReactElement ，可以這樣設置：

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

源代碼中的children類型也是React.ReactElement ，但必須包裝在接口中，因為它作為組件 props 的屬性傳入。

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

interface StoreProviderProps {
    children: React.ReactElement;
}