Typescript Error: TS2604 - How to fix?

Question

我正在尝试在基于 Typescript 的项目中使用名为 redux-form 的库。当我使用他们的 "simple form" 示例代码并实现它时，我得到一个错误：

error TS2604: JSX element type 'SimpleForm' does not have any construct or call signatures.

我做错了什么？我安装了这个库的定义文件，所以要么我编码不正确，要么定义文件不正确。

在我的表单组件中（剥离代码以使其尽可能精简）：

import * as React from 'react';
import {reduxForm} from 'redux-form';
export const fields = ['firstName'];

class SimpleForm extends React.Component<any, any> {

  static propTypes = {
    fields: React.PropTypes.object.isRequired,
  };

  render() {
    const {
      fields: {firstName}
      } = this.props;
    return (<form>
        <div>
          <label>First Name</label>
          <div>
            <input type="text" placeholder="First Name" {...firstName}/>
          </div>
        </div>

        <div>
          <button>
            Submit
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'simple',
  fields
})(SimpleForm);

我在这里使用它（导致上述错误）：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as SimpleForm from '../components/GuestForm';

export default class Main extends React.Component<any, any> {
     render() {
        return (
        <div className='mainApp'>
            <SimpleForm />
        </div>
        );
    }
}

Answer 1

我认为你的问题在于你如何导入默认导出的 class:

export default reduxForm(...

如果你像上面那样声明了它，那么你应该像这样导入它：

import SimpleForm from '../components/GuestForm'

否则您可以删除 'default' 并像这样导入它：

import {SimpleForm} from '../components/GuestForm'

希望对您有所帮助。

Answer 2

我无法评论上面的答案（来自 Amid），因为我在 Whosebug 上的声誉不够，但他的答案是正确的。

我遇到了同样的问题： *** (82,14)：错误 TS2604：JSX 元素类型 'SlideForm' 没有任何构造函数调用签名。***

这是我之前的代码：

export default class SliderForm extends React.Component<any, any> {...};

用之前的方式导入 class :

import * from SlideForm from '../../common/SliderForm';

这让我遇到了与您相同的问题。

所以我改变了导入的方式：

import SlideForm from '../../common/SliderForm';

它解决了我的问题。

Answer 3

在你的情况下你也可以这样做（因为它已经默认导出）

import * as SlideForm from '../../common/SliderForm';

如果组件已作为默认组件导出，而您正尝试使用 {} 或 *

导入它，则会出现此错误

或者反过来。

如果组件没有被声明为默认组件，应该用大括号导入，例如-

import {component} from '../path/..'

Typescript Error: TS2604 - How to fix?

Typescript Error: TS2604 - How to fix?

reactjs

typescript

redux-form