TS2345：“ReactNode”类型的参数不可分配给“ReactElement”类型的参数

Question

TS2345：“ReactNode”类型的参数不可分配给“ReactElement<any, string |”类型的参数 ((props: 任意) => ReactElement<任意, 任意> | null) | (new (props:any) => Component<any,any,any>)> | ReactElement<任意，字符串| ... 1 更多... | (new (props: any) => Component<...>)>[]'. 类型“undefined”不可分配给类型“ReactElement<any, string |” ((props: 任意) => ReactElement<任意, 任意> | null) | (new (props:any) => Component<any,any,any>)> | ReactElement<任意，字符串| ... 1 更多... | (new (props: any) => Component<...>)>[]'.

错误的图像

这是我的代码：

import React, {forwardRef, ReactNode} from 'react';

import {mergeClasses} from '../../utils';
import {ArrowLeft} from '../../icons';

import {BreadcrumbsProps} from './declarations/Breadcrumbs.types';

import defaultClasses from './styles/Breadcrumbs.module.css'

export const Breadcrumbs = forwardRef<HTMLLabelElement, BreadcrumbsProps>(
    ({
        separator="/",
        children,
        back,
        classNames,
        onClick,
     }) => {
        const styles = mergeClasses(defaultClasses, classNames);

        const Back = (
            <button className={styles.back} type='button' onClick={onClick}>
                <ArrowLeft/>
                <span>Back</span>
            </button>
        )

        const Separator = <span className={styles.separator}>{separator}</span>;

        const getValidChild = (itemToRender: ReactNode, delta: number, index: number) => {
            const SeparatorWithKey = React.cloneElement(Separator, { key: `${index}_separator` });

            return index === 0 ? [itemToRender] : [SeparatorWithKey, itemToRender];
        };

        const getItemsByChildren = () => {
            const delta = React.Children.toArray(children).length;
            return (
                React.Children.map(children, (child: React.ReactElement, index) => {
                return (
                    child &&
                    getValidChild(
                        React.cloneElement(child),
                        delta,
                        index
                    )
                );
            }));
        };

        return (
            <div className={styles.wrapper}>
                {back && Back}
                <ul className={styles.breadcrumbs}>
                    {getItemsByChildren()}
                </ul>
            </div>
        );
    },
);

Answer 1

您已经在这里声明了错误的类型child：

React.Children.map(children, (child: React.ReactElement, index) => {

children属于 类型React.ReactNode。React.Element是完全不同的东西。

您根本不需要输入这个参数，React.Children.map已经可以在这里推断出正确的类型。只是这个工作得很好：

React.Children.map(children, (child, index) => {

操场