Typescript ESLint错误-使用react功能组件时如何键入子项？

Question

我正在收集以下样本的样板：

• 反应16。x（来自CreateReact应用程序）
• 打字稿
  • 带功能部件
  • 通过上下文提供程序

  我几乎已经解决了所有问题，但我似乎无法解决我遇到的这一个错误。我有一个像这样的MobX商店供应商

  js prettyprint-override">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: ['[e-mail]'] },
      applicationStore: { firstName: 'neil', lastName: 'peart' }
    })) as StoreType;
    return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
  };
  
  

  我得到的错误：

  6:30警告@typescript eslint/explicit函数返回类型上缺少返回类型

  6:33道具/道具类型中缺少错误“children”

  如果你想把整个事情搞定，你可以在这里：https://github.com/Savij/functional-react-mobx-material

  欣赏任何洞察力！-J

Answer 1

在您的示例中，StoreProvider的返回类型是React。ReactElement，可以这样设置：

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

源代码中的子项类型也是React。ReactElement，但必须包装在接口中，因为它将作为组件道具的属性传入。

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

interface StoreProviderProps {
    children: React.ReactElement;
}