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

Question

我正在整理一个样板样本：

React 16.x（来自 create-react-app）
打字稿
- 具有功能组件
Material-UI
Mobx-React
- 通过上下文提供程序
ESLint

我几乎已经解决了所有问题，但我似乎无法弄清楚我遇到的这个 ESLint 错误。我有一个看起来像这样的 MobX store provider

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 warning Missing return type on function @typescript-eslint/explicit-function-return-type

6:33 error 'children' is missing in props validation react/prop-types

如果你想把整个东西拉下来，你可以在这里：https://github.com/Savij/functional-react-mobx-material

感谢任何见解！ -J

Answer 1

你的例子中StoreProvider的return类型是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;
}

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

Typescript ESLint Error - How can I type children when using react functional components?

typescript

reactjs

mobx-react