时间戳

首页 > 解决方案 > Typescript ESLint 错误 - 使用反应功能组件时如何键入子项？

reactjs - Typescript 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

标签： reactjstypescriptmobx-react

解决方案

StoreProvider您的示例中的返回类型是 a 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;
}

推荐阅读