类型错误:此JSX标记的“子”支柱需要一个类型为“ReactNode”的子级，但提供了多个子级
我正在和Next JS一起开发网页。
在开发环境中，它运行良好，没有任何错误，但在产品环境中构建时，此错误消息显示：
类型错误:该JSX标记的“子”支柱需要一个类型为“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.Element
或
儿童: JSX.Element|JSX.Element[]
显示另一条错误消息，如下所示：
类型错误：“组件”不能用作JSX组件.
的元素类型'ReactElement \ Component<{}，any，any> _ null‘不是有效的JSX元素.。
类型'Component<{}，any，any>‘不能分配到键入’元素\ ElementClass \\空‘。。
类型'Component<{}，any，any>‘不能指定键入'ElementClass'.
'render()‘返回的类型在这些类型之间是不兼容的。
不能将'import("/home/runner/work/next-web/next-web/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.类型指定为类型'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>
</>
)回答 2
Stack Overflow用户
发布于 2022-04-13 01:54:23
你在哪里使用<ShowModal>？听起来像是要把多个孩子传递给ShowModal。您应该能够通过将这些组件包装在<div>或空尖括号中，将<>作为道具传递给<ShowModal>来解决这个问题。
如果要传递多个子级，可以将它们放入数组中。对于此解决方案，您应该将接口更改为如下所示：
interface ShowModalProps {
text: string;
children: React.ReactNode|React.ReactNode[];
}这意味着children既可以是单个ReactNode，也可以是ReactNodes的数组。
在您添加的显示使用<ShowModal>的代码中，结束标记如下所示：
</showModal>您需要将其大写，以匹配开始标记，如：</ShowModal>
下面是您的代码按预期使用这些更改的示例关于密码箱
Stack Overflow用户
发布于 2022-11-30 07:53:15
当您试图显示JavaScript对象的数组而不是响应节点时，就会发生这种情况。而不是<div>{myObjects}</div>，请使用
<ol>
{myObjects.map(({ name }) => (<li>{name}</li>))}
</ol>https://stackoverflow.com/questions/71850882
复制相似问题
腾讯云开发者
