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

Question

TS2345：“ReactNode”类型的参数不可分配给“ReactElement<any, string | 类型的参数” ((props: any) => ReactElement<any, any> | null) | (new (props: any) => 组件<any, any, any>)> | ReactElement<any, string |... 1 更多... | (new (props: any) => 组件<...>)>[]'。 类型 'undefined' 不可分配给类型 'ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => 组件<any, any, any>)> | ReactElement<any, string |... 1 更多... | (new (props: any) => 组件<...>)>[]'。

错误图片

这是我的代码：

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) => {

操场