我正在为我的应用程序使用 react-typescript。对于样式，我正在使用样式组件。我决定创建我的自定义钩子输入和密码输入。所以我首先创建了输入包装器，在其中添加了必要的输入字段。之后，我创建了密码输入字段。我用输入组件道具扩展了我的密码输入组件道具。但是当我使用输入组件包装器到我的密码组件时。我收到错误：This JSX tag's 'children' prop expects a single child of type 'Element | undefined', but multiple children were provided.
我不知道我做错了什么。
这是我的输入包装器组件
import React from "react";
import styled from "styled-components";
import ErrorBoundary from "components/errorBoundary";
const Container = styled.div`
position: relative;
`;
const Label = styled.label<{ minimized?: boolean }>`
display: block;
color: ${({ theme }) => theme.inputLabelColor};
font-weight: 400;
font-size: ${({ minimized }) => (minimized ? "11px" : "16px")};
margin-bottom: 5px;
letter-spacing: -0.2px;
position: absolute;
transform: translateY(${({ minimized }) => (minimized ? "9px" : "16px")});
left: 20px;
top: 0;
pointer-events: none;
transition: transform 150ms linear, font-size 150ms linear;
`;
const Error = styled.p`
color: ${({ theme }) => theme.errorTextColor};
`;
const Description = styled.p`
color: blue;
`;
export interface IInputWrapperProps {
label?: string;
required?: boolean;
minimizedLabel?: boolean;
description?: string;
error?: string;
wrapperStyle?: React.CSSProperties;
children?: JSX.Element;
}
export default ({
label,
error,
description,
children,
required,
wrapperStyle,
minimizedLabel
}: IInputWrapperProps) => {
return (
<ErrorBoundary id="InputWrapperErrorBoundary">
<div style={wrapperStyle}>
<Container>
<Label minimized={minimizedLabel}>
{label} {required && <span style={{ color: "red" }}> *</span>}
</Label>
{children}
</Container>
{description && <Description>{description}</Description>}
{error && <Error>{error}</Error>}
</div>
</ErrorBoundary>
);
};
这是我的密码组件
import React, { useState } from "react";
import styled from "styled-components";
import eyeHide from "./eye-svgfiles/eyeHide.svg";
import eyeShow from "./eye-svgfiles/eyeShow.svg";
import InputWrapper, { IInputWrapperProps } from "../wrapper";
const Passwordinput = styled.input`
border: 2px solid ${({ theme }) => theme.inputBorderColorFaded};
background: ${({ theme }) => theme.inputBackgroundColor};
display: block;
border-radius: 5px;
box-shadow: none;
color: ${({ theme }) => theme.inputTextColor};
height: 52px;
width: 100%;
margin: 0;
padding: 1px 15px;
&:focus {
border: 2px solid ${({ theme }) => theme.inputBorderColor};
outline: 0;
}
`;
const Svg = styled.div`
position: absolute;
left: 50%;
top: 65%;
transform: scale(0.8);
`;
export interface IPasswordProps extends IInputWrapperProps {
onChange: (i: string) => void;
value?: string | undefined;
}
export default ({ onChange, value, label, error, ...rest }: IPasswordProps) => {
const [state, setstate] = useState(false);
return (
<div>
<InputWrapper label={label} error={error} {...rest}> //I am getting error in here
<Passwordinput
label={label}
type={state ? "text" : "password"}
onChange={e => onChange(e.target.value)}
value={value}
error={error}
/>
<Svg>
<img
onClick={() => setstate(state => !state)}
style={{ cursor: "pointer" }}
src={state ? eyeShow : eyeHide}
alt="searchIcon"
/>
</Svg>
</InputWrapper>
</div>
);
};
像这样编写你的界面：
export interface IInputWrapperProps {
label?: string;
required?: boolean;
minimizedLabel?: boolean;
description?: string;
error?: string;
wrapperStyle?: React.CSSProperties;
children?: JSX.Element|JSX.Element[];
}
实际上写作：
children: JSX.Element|JSX.Element[];
子元素可以是单个 JSX 元素，也可以是元素数组。
致所有 React 18 采用者
如果您刚刚升级到 React 18 并且像我一样，那么您会在任何地方添加React.PropsWithChildren<>，因为道具的类型不再意味着children。如果您找到此线程，您可能会遇到我遇到的一个随机组件似乎无缘无故地给出此错误的情况，即使将多个元素作为children是完全合法的。
溶液：
许多不同的东西都可以是"反应子项"，包括很多基元类型，而像undefined、null和false这样的东西就是不渲染。我的组件有点像这样：
<Container>
{maybeNull && <Component notNullThing={maybeNull} />}
{maybeNull2 && <Component notNullThing={maybeNull2} />}
{maybeNull3 && <Component notNullThing={maybeNull3} />}
</Container>
事实证明，maybeNull技术上具有unknown型，这抛弃了一切。我用<>{maybeNull && <Component notNullThing={maybeNull} />}</>修复了它(因为出于某种原因，单个unknown是合法的(，尽管我也可以做{maybeNull ? <Component notNullThing={maybeNull} /> : null}或类似的事情。
我认为这是因为React.ReactNode的类型是一个包含ReactFragment的大联合，它被递归实现为Iterable<ReactNode>。这就是为什么ReactNode可以是ReactNode数组的原因。但是，unknown意味着您不知道它是工会中的哪些事物，因此您不知道它可能Iterable<ReactNode>。一些类似的东西。
可以通过以下方式修复：
interface InputWrapperProps {
...yourProps,
children?: React.ReactNode
}
希望它有帮助！
对我来说，shuhat36 建议的变体工作正常。所以我只是为辣椒添加了片段。
有错误的示例：
<div className="container">
{renderTabs()}
{renderButtons()}
</div>
和相同的代码但已修复：
<div className="container">
<>
{renderTabs()}
{renderButtons()}
</>
</div>
解决此错误的一种方法是使用片段来包装组件的子级。这对我有用。
解决了👍👍👍错误：TS2746：此JSX标签的"子项"属性需要类型为"ReactNode"的单个子项，但提供了多个子项。
方式：为奇伦斯添加片段。
code: <p>Username: {loading ? 'Loading' : data}</p>
solved: add <></>
solved code: <p>Username: <>{loading ? 'Loading' : data}</></p>
正确的做法如下：
interface InputWrapperProps {
...yourProps,
children?: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}
塞尔维斯
派对迟到了，但只是使用
export interface YourType {
type1: string,
}
const YourComponent = ({type1, children}: PropsWithChildren<YourType>) => {
return <></>
}不应显式键入子项
对我来说，这是我在标签中添加的评论。评论如下。看起来 React 把这个评论当作一个孩子。
{/* TODO: Pending work /*}
删除此评论后，它起作用了。
如果您忘记解构您的道具，可能会触发此错误
例如，以下内容将触发This JSX tag's 'children' prop expects a single child of type 'Element | undefined', but multiple children were provided错误：
export const MyComponent: FC<PropsWithChildren> = (children) => (
<div>{children}</div>
);
这是因为孩子实际上是道具对象，但反应直到进一步向下才抛出错误。要修复，请记住从道具中解构子项：
export const MyComponent: FC<PropsWithChildren> = ({ children }) => (
<div>{children}</div>
);
将孩子包裹在一个片段中对我有用
对我来说，有效的方法是将接口类型更改为儿童？：ReactElement|string并在子元素周围放置一个跨度
这样使用它是正确的：
interface InputWrapperProps {
....
children?: any;
}
问题出在"{"中。 在消费者"{"中必须在新行上。