\'Select.Option\' 不能用作 JSX 组件答案

【问题标题】：'Select.Option' cannot be used as a JSX component\'Select.Option\' 不能用作 JSX 组件
【发布时间】：2022-10-21 00:20:49
【问题描述】：

我使用 antd select 编写了选择组件

“反应”：“^16.9.9”， "antd": "^3.26.17", “打字稿”：“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 run build 期间，我收到以下错误

 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 |             );

【问题讨论】：

您能否添加您的Select 组件的代码？
Option 子组件在哪里定义？
我没有创建任何新组件，我只是从 select 中获得了选项并将其传递如下 {data?.map((item: any) => { return ( <Select.Option key={item.id} value={ item.id}> {item.name} </Select.Option> ); })} @DBS
这是否回答了您的问题：NPM package cannot be used as a JSX Component - Type errors？

标签： reactjs typescript next.js antd

【解决方案1】：

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

【讨论】：