将类型 React.FC 分配给组件后，属性 'children' 在类型上不存在

Question

我已将类型 React.FC 分配给我的组件，但我仍然无法访问子道具。我收到此错误“属性 'children' 在类型 'ButtonProps' 上不存在”。我无法访问儿童道具还有其他原因吗？

import React from 'react'

export interface ButtonProps{
    label:string;
}

const Button:React.FC<ButtonProps> = (props) => {
  const {children} = props
  return <div>{children}</div>
}

export default Button

Answer 1

使用 React.FC 是 discouraged，所以现在您应该定义组件的类型并明确其 children 属性，如下所示：

export interface ButtonProps{
    label:string;
    children: React.ReactNode
}

const Button = (props: ButtonProps) => {
  const {children} = props
  return <div>{children}</div>
}

Answer 2

题外话：不要将您的组件不会使用的东西传递给您的组件，尝试在您的组件的头部解构道具。因此，该组件将只获得它需要的东西，并且您将确切地知道您传递给该组件的是什么，它们的 props 和默认值是什么（如果需要的话）。

将类型 React.FC 分配给组件后，属性 'children' 在类型上不存在

Property 'children' does not exist on type after assigning type React.FC to component

typescript

reactjs

storybook