reactjs - TS2345: 'ReactNode' türündeki argüman, 'ReactElement' türündeki parametreye atanamaz

TS2345: 'ReactNode' türündeki argüman, 'ReactElement ReactElement | null) | (new (props: any) => Component)> | ReactElement Component<...>)>[]' türündeki parametreye atanamaz. 'undefined' türü, 'ReactElement ReactElement | null) | (new (props: any) => Component)> | ReactElement Component<...>)>[]' türüne atanamaz.

Hata resmi

İşte benim kodum:

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>
        );
    },
);

Cevap #1

Burada child türünü yanlış beyan ettiniz:

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

children React.ReactNode türündedir. React.Element tamamen farklı bir şeydir.

Bu argümanı hiç yazmanıza gerek yok, React.Children.map burada doğru türü zaten çıkarabiliyor. Sadece bu işe gayet iyi yarıyor:

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

Oyun alanı

Cevap #2

tsconfig.json seçeneklerinizi kontrol edin ve umarım bu size yardımcı olur, çünkü bu hatadan önce çok zaman harcadım, mantıksız olan bu hata beni sorunun kaynağını bulmamda yardımcı olan bu makaleye yönlendirdi

"compilerOptions": {
    "paths": {
      "react": ["node_modules/@types/react"]
    }
  }

veya

"compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "target": "es2021"
  },

İlgili makaleler