JSX 元素类型 'MultiSelectComponent' 没有任何构造或调用签名

Question

我正在开发一个 React 应用程序。它包含一个组件如下..

    public render() {
    const { className, input, meta, options, placeholder, async } = this.props;
    const value = this.state.value;
    let MultiSelectComponent;
    const defaultProps = {
      closeOnSelect: false,
      multi: true,
      onChange: (val: any) => this.handleSelectChange(input, val, options),
      options,
      placeholder: placeholder || 'Select All That Apply',
      removeSelected: true,
      simpleValue: true,
      value,
    };
    let addProps = {};
    if (async) {
      MultiSelectComponent = Async;
      addProps = {
        loadOptions: this.props.handleSearchOption,
        cache: false,
      };
    } else {
      MultiSelectComponent = Select;
      addProps = {
        async: false,
      };
    }

    return (
      <div className={`section ${className}`}>
        <MultiSelectComponent {...defaultProps} {...addProps} /> // error is here
        {meta &&
          meta.touched &&
          meta.error && (
            <span className="input-validation-message">{meta.error}</span>
          )}
      </div>
    );
  }

以上代码只是一个组件的渲染。

错误是

JSX element type 'MultiSelectComponent' does not have any construct or call signatures

任何建议都是可取的.. 谢谢

Answer 1

我在上面解决了...

let MultiSelectComponent; to let MultiSelectComponent: React.ElementType;

public render() {
    const { className, input, meta, options, placeholder, async } = this.props;
    const value = this.state.value;
    let MultiSelectComponent: React.ElementType; // Change is here..
    const defaultProps = {
      closeOnSelect: false,
      multi: true,
      onChange: (val: any) => this.handleSelectChange(input, val, options),
      options,
      placeholder: placeholder || 'Select All That Apply',
      removeSelected: true,
      simpleValue: true,
      value,
    };
    let addProps = {};
    if (async) {
      MultiSelectComponent = Async;
      addProps = {
        loadOptions: this.props.handleSearchOption,
        cache: false,
      };
    } else {
      MultiSelectComponent = Select;
      addProps = {
        async: false,
      };
    }

    return (
      <div className={`section ${className}`}>
        <MultiSelectComponent {...defaultProps} {...addProps} /> // error is here
        {meta &&
          meta.touched &&
          meta.error && (
            <span className="input-validation-message">{meta.error}</span>
          )}
      </div>
    );
  }

JSX 元素类型 'MultiSelectComponent' 没有任何构造或调用签名

JSX element type 'MultiSelectComponent' does not have any construct or call signatures

reactjs

react-select