我使用antSELECT编写了选择组件
“REACT”:“^16.9.9”,“antd”:“^3.26.17”,“TypeScrip”:“4.7.4”,
export const SelectComponent = React.forwardRef<any, Props>(
(
{
onChange,
className,
loading,
mode = SelectMode.default,
showArrow,
dropdownRender,
data,
disabled,
background,
border,
boxShadow,
color,
height,
style,
showSearch,
value,
dropdownStyle,
}: Props,
ref
) => {
const wrapperProps = {
background,
border,
boxShadow,
color,
height,
className,
};
return (
<S.Wrapper {...wrapperProps}>
<Select
onChange={onChange}
loading={loading}
mode={mode}
showArrow={showArrow}
className={className}
value={value}
dropdownStyle={dropdownStyle}
dropdownRender={dropdownRender}
disabled={disabled}
style={style}
showSearch={showSearch}
ref={c => {
if ((ref as React.RefObject<any>).current)
(ref as React.RefObject<any>).current.select = c;
}}
>
{data?.map((item: any) => {
return (
<Select.Option key={item.id} value={item.id}>
{item.name}
</Select.Option>
);
})}
</Select>
</S.Wrapper>
);
}
);
在NPM运行构建期间,我收到以下错误
Type error: 'Select.Option' cannot be used as a JSX component.
Its instance type 'ClassicComponent<OptionProps, any>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("project-path/node_modules/@types/react-slick/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
59 | {data?.map((item: any) => {
60 | return (
> 61 | <Select.Option key={item.id} value={item.id}>
| ^
62 | {item.name}
63 | </Select.Option>
64 | );
1条答案
按热度按时间sg24os4d1#
这就是旧的
antd
版本的问题。将其更新为v4
将修复错误,但也会破坏一些旧组件,因此请记住这一点。