typescript 即使在提供类型“FC”之后，Typscript仍不断抛出类型“FC”上不存在的属性“children”< ProvidersProps>

lg40wkob 于 2023-05-19 发布在 TypeScript

关注(0)|答案(1)|浏览(174)

我已经提供了接口的 prop ，但仍然其投掷

属性“children”在类型“FC”上不存在。

'use clilent'

import React, { FC, ReactNode } from 'react'
import { Toaster } from 'react-hot-toast'

interface ProvidersProps {
  children: React.ReactNode
}

export default function Providers(props: FC<ProvidersProps>) {
  return (
    <>
      <Toaster position="top-center" reverseOrder={false} />
      {props.children}
    </>
  )
}

我把typscript@5.0.4改成了4.9.6。还是不行

typescript

来源：https://stackoverflow.com/questions/76269995/typscript-keeps-throwing-property-children-does-not-exist-on-type-fcprovider

1条答案

按热度按时间

qvtsj1bj1#

参数props: FC<ProvidersProps>表示Provider的props是函数组件。它们不是，Providers本身（不是它的props）是一个函数组件。
你有几个选择。
如果要使用FC，请将其用作函数本身的类型：

const Providers: FC<ProvidersProps> = (props) => {
    return (
        <>
            <Toaster position="top-center" reverseOrder={false} />
            {props.children}
        </>
    );
};

export default Providers;

Playground链接
或者，不要使用FC（没有要求）：

export default function Providers(props: ProvidersProps) {
    return (
        <>
            <Toaster position="top-center" reverseOrder={false} />
            {props.children}
        </>
    );
}

Playground链接
FC真正能为您带来的是防止忘记从函数返回适当的内容（或返回不适当的内容）。另一种方法是提供一个返回类型-ReactNode，如果你永远不会返回null（这很少见）：

export default function Providers(props: ProvidersProps): ReactNode | null {
    return (
        <>
            <Toaster position="top-center" reverseOrder={false} />
            {props.children}
        </>
    );
}

Playground链接

赞(0）回复(0）举报 2023-05-19

我来回答

typescript 即使在提供类型“FC”之后，Typscript仍不断抛出类型“FC”上不存在的属性“children”< ProvidersProps>

1条答案

相关问题

热门标签

最新问答