React的ReactElement与ReactNode类型定义区别

2023-03-18 80 阅读1分钟

ReactElement与ReactNode

子组件的 children 为 ReactNode 类型， children 可以提供多个子元素
子组件的 children 为 ReactElement 类型， children 只能有一个子元素
所以子组件的 children 推荐使用 ReactNode 类型

...

export interface IProps {
  children?: ReactNode
}

const ScrollView: FC<IProps> = function (props) {
  const { children } = props

  return (
    <div className=" overflow-hidden relative">
        {children}
    </div>
  )
}

如果 children 为 ReactElement 类型报错， ReactNode 类型不报错

<ScrollView>
    <div>123</div>
    <div>123</div>
</ScrollView>