typescript 类型错误:此JSX标记的“children”属性需要一个类型为“ReactNode”的子级,但提供了多个子级

vwoqyblh  于 2022-11-30  发布在  TypeScript
关注(0)|答案(2)|浏览(2280)

我正在用Next JS开发网页。
在开发环境中,它运行良好,没有任何错误,但在产品环境中构建时,显示此错误消息:

类型错误:此JSX标记的“children”属性需要一个类型为“ReactNode”的子项,但提供了多个子项。

我的代码如下:

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

在修改子类型时这样:

子项:JSX.元素

子项:JSX.Element| JSX.元素[]

显示另一条错误消息,如下所示:

**类型错误:“Component”不能用作JSX组件。

它的元素类型'ReactElement〈any,any〉|组件〈{},any,any〉|null'不是有效的JSX元素。
类型“Component〈{},any,any〉"不能赋给类型”Element|元素类别|空值“。
型别'Component〈{},any,any〉'无法指派给型别'ElementClass'。
“render()”返回的类型在这些类型之间不兼容。
无法将类型“React.ReactNode”分配给类型“import(“/home/runner/work/下一个Web/下一个Web/节点模块/@类型/样式化组件/节点模块/@类型/React/索引”). ReactNode“。
型别'{}'无法指派给型别'ReactNode'。**
我该怎么修?
谢谢!
添加:产品环境:aws
编辑:

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>
</>
)
neekobn8

neekobn81#

您在哪里使用<ShowModal>?听起来像是您在传递多个子项给ShowModal。您应该可以通过将这些组件 Package 在<div>或空尖括号<>中来修复这个问题,无论您在何处将它们作为道具传递给<ShowModal>
如果你想传递多个子元素,你可以把它们放到一个数组中。对于这个解决方案,你应该把你的接口改成这样:

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

这意味着children可以是单个ReactNode,也可以是ReactNode数组。
在添加的显示<ShowModal>用法的代码中,结束标记如下所示:

</showModal>

您需要将其大写以匹配开始标记,如下所示:</ShowModal>
下面是一个示例,说明代码在这些更改on codesandbox的情况下按预期工作

1rhkuytd

1rhkuytd2#

当您尝试显示JavaScript对象数组而不是React节点时,可能会发生这种情况。

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

相关问题