“Select.Option”不能用作JSX组件

eyh26e7m  于 2022-10-21  发布在  其他
关注(0)|答案(1)|浏览(840)

我使用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 |             );
sg24os4d

sg24os4d1#

这就是旧的antd版本的问题。将其更新为v4将修复错误,但也会破坏一些旧组件,因此请记住这一点。

相关问题