Собственность «Дети» не существует на типе 'avatarfallbackprops' ⇐ Javascript

[Anonymous]

Я использую chakra ui с Ark (или @chakra-ui/react-компонентами, такими как avatar.root, avatar.fallback и т. Д.) В проекте Typescript next.js. Я строю пользовательский компонент аватара, используя ui ui с подкомпонентами avatar. Project. Тем не менее, TypeScript выбрасывает следующую ошибку: < /p>

type '{kids: string | номер | bigint | Верно | Итерабильный | Обещание | Элемент; Ссылка: ForkingedRef ; } 'не назначает типа' intrinsicattributes & avatarfallbackprops & Refattributes '.

Код: Выделить всё

'use client'

import type { GroupProps, SlotRecipeProps } from '@chakra-ui/react'
import { Avatar as ChakraAvatar, Group } from '@chakra-ui/react'
import * as React from 'react'

type ImageProps = React.ImgHTMLAttributes

export interface AvatarProps extends ChakraAvatar.RootProps {
name?: string
src?: string
srcSet?: string
loading?: ImageProps['loading']
icon?: React.ReactElement
fallback?: React.ReactNode
}
export const Avatar = React.forwardRef(function Avatar(props, ref) {
const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props
return (


{fallback}

{/* Pass only the correct string values here */}

{children}

)
})

interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
name?: string
icon?: React.ReactElement
children?: React.ReactNode
}

const AvatarFallback = React.forwardRef(
function AvatarFallback(props, ref) {
const { name, icon, children, ...rest } = props
let fallbackContent = null
if (children) {
fallbackContent = children
} else if (name != null) {
fallbackContent = {getInitials(name)}
} else {
fallbackContent = {icon}
}
return (

{fallbackContent}

)
}
)

function getInitials(name: string) {
const names = name.trim().split(' ')
const firstName = names[0] != null ? names[0] : ''
const lastName = names.length > 1 ? names[names.length - 1] : ''
return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0)
}

interface AvatarGroupProps extends GroupProps, SlotRecipeProps {}

export const AvatarGroup = React.forwardRef(function AvatarGroup(
props,
ref
) {
const { size, variant, borderless, ...rest } = props
return (



)
})

В этой ошибке говорится, что реквизиты, которые вы передали, включают детей, но ваш тип Avatarfallbackprops не определяет детей - поэтому TypeScript не допускает этого.

Подробнее здесь: https://stackoverflow.com/questions/796 ... lbackprops