类型错误:此JSX标记的“子”支柱需要一个类型为“ReactNode”的子级，但提供了多个子级开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

文章/答案/技术大牛

发布

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>
}

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>