typescript - Typefejl: Denne JSX-tags 'children'-prop forventer et enkelt barn af typen 'ReactNode', men flere børn blev leveret

Jeg udvikler en webside med Next JS.
I udviklingsmiljøet fungerer det godt uden fejl, men når jeg er bygget i produktmiljøet, viser denne fejlmeddelelse:
Typefejl: Denne JSX-tags 'børn'-prop forventer et enkelt barn af typen 'ReactNode', men der blev givet flere børn.
Min kode er her:

import React, { useState } from "react";
import { IconContext } from "react-icons";
import { AiOutlineClose } from "react-icons/ai";
import Modal from "react-modal";
import styled from "styled-components";
import styledButton from "../button/styledButton";
import { ModalCloseButton } from "./ModalCloseButton";

interface ShowModalProps {
    text: string,
    children: React.ReactNode
}

const StyledModal = styled(Modal)`
    position: relative;
    margin: 50px auto 0;
    text-align: center;
    width: 100%;
    height: 90%;
    padding: 5%;
    background-color: #555555;
    box-sizing: border-box;
    overflow-y: auto;
    
    @media screen and (min-width: 768px) {
        width: 40%;
        height: 100%;
        padding: 5%;
        margin: 0 auto;
    }
`

export default function ShowModal({ text, children }: ShowModalProps) {
    const [modalIsOpen, setIsOpen] = useState(false);
    
    return (
        <>
            <styledButton text={text} handleModalState={setIsOpen} />
            <StyledModal
                isOpen={modalIsOpen}
                style={{
                    overlay: {
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                    }
                }}
                onRequestClose={() => setIsOpen(false)}
                ariaHideApp={false}
                className="animate__animated animate__fadeIn"
            >
                <IconContext.Provider value={{
                    style: {
                        width: "100%",
                        height: "100%"
                    }
                }}>
                    <ModalCloseButton buttoncolor="#FFFFFF">
                        <AiOutlineClose onClick={() => setIsOpen(false)} />
                    </ModalCloseButton>
                </IconContext.Provider>
                <p>Modal</p>
                {children}
            </StyledModal>
        </>
    )
}

Når du ændrer børnetypen sådan her:
children: JSX.Element
eller
children: JSX.Element|JSX.Element[]

viser en anden fejlmeddelelse som denne: <br /> Typefejl: 'Component' kan ikke bruges som en JSX-komponent.<br /> Dens elementtype 'ReactElement<any, any> | Komponent<{}, enhver, enhver> | null' er ikke et gyldigt JSX-element.<br /> Type 'Component<{}, any, any>' kan ikke tildeles typen 'Element | ElementClass | null'.<br /> Type 'Component<{}, any, any>' kan ikke tildeles til typen 'ElementClass'.<br /> De typer, der returneres af 'render()', er inkompatible mellem disse typer.<br /> Typen 'React.ReactNode' kan ikke tildeles til typen 'import("/home/runner/work/next-web/next-web/node_modules/@types/styled-components/node_modules/@types/react/index"). ReactNode'.
Type '{}' kan ikke tildeles typen 'ReactNode'.

Hvordan kan jeg reparere?

tak!

tilføj: Produktenviroment: aws

Rediger :

return (
<>
    <p>Click Button!</p>
    <ShowModal text="Next">
        <form onsubmit={onSubmit}>
            <input  
                type="text"  
                placeholder="write your first name"/>  
            <input  
                type="text"  
                placeholder="write your last name"/>  
            <button>submit</button>
        </form>
    </showModal>
</>
)

Svar #1

Hvor bruger du <ShowModal>? Det lyder som om, du sender flere children til ShowModal. Du burde kunne løse dette ved at pakke disse komponenter ind i en <div> eller i tomme vinkelparenteser <> hvor som helst, du sender dem som props til <ShowModal>.

Hvis du vil sende flere børn, kan du gøre dette ved at putte dem i et array. For denne løsning bør du ændre din grænseflade til at være sådan her:

interface ShowModalProps {
    text: string;
    children: React.ReactNode|React.ReactNode[];
}

Dette betyder, at children kan være enten en enkelt ReactNode eller et array af ReactNodes.

I den kode, du tilføjede for at vise din brug af <ShowModal>, ser din lukketag sådan ud:

</showModal>

Du bliver nødt til at skrive det med store begyndelsesbogstaver for at matche åbningstagget, sådan her: </ShowModal>

Her er et eksempel på, at din kode fungerer som forventet med disse ændringer på codesandbox

Svar #2

Dette kan ske, når du forsøger at vise et array af JavaScript-objekter i stedet for React-noder. I stedet for <div>{myObjects}</div>, brug

<ol>
  {myObjects.map(({ name }) => (<li>{name}</li>))}
</ol>

Relaterede artikler