我正在为我的应用程序使用react-typescript。对于样式,我使用样式组件。我已经决定要创建自定义的“挂钩输入”和“密码”输入。因此,我首先创建了输入包装器,在其中添加了必要的输入字段。之后,我创建了密码输入字段。我用输入组件属性扩展了我的密码输入组件属性。但是当我使用Input组件包装到我的密码组件时。我收到错误消息: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>
);
};
就像错误所说的一样,您只能提供1个元素作为子元素。您可以将它们包装成一个片段,如下所示:
InputWrapper label={label} error={error} {...rest}>
<>
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句