Question

在切换到npm和webpack处理项目中的依赖项后，Typescript已经变得混乱。它与React.Component有一些奇怪的问题。它不允许我传递两个接口，说它需要一个接口，并且当它有一个接口时会抱怨它没有两个接口。

当我声明这样的组件时：

export interface IProps {
  formId: number;
}

export default class FormNavButtons extends React.Component<Iprops, {}> {...}

我收到错误：“通用类型' $ $ RsRpExt”FromFile :(路径到@types \ React \ index.d.ts），module = JavascriptReferencedFilesModule：引用的外部文件.React。组件需要1个类型的参数但是得到2

不知道为什么，在我开始使用来自npm的软件包之前没有发生过这样的事情。当我给它一个参数时，我得到一个错误： “通用类型组件需要2个类型参数”

这是我的依赖项列表：

"@types/react": "^15.0.38",
"@types/react-dom": "^15.5.1",
"awesome-typescript-loader": "^3.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.4.2",
"webpack": "^3.3.0"

我该怎么做才能做到这一点？我无处可寻找问题

修改

按照VladoPandžić的要求，这是一个完整的示例组件。然而，问题涉及到最后一个问题。

import * as React from "react";
import FormButton from "./formButton";

export interface IProps {
    formId: number;
    save: Function;
    submitStatus: string;
    saveStatus: string;
    prevId: number;
    nextId: number;
    formNavigation: any;
}

export default class FormNavButtons extends React.Component<IProps, {}> {
    render() {
    return (
        <nav className="form-nav-buttons">
        <div className="flippable-container">
            <div className="form-nav-flippable">
                <FormButton faClass="fa-upload" label="Submit" cssClass="form-nav-submit" showsStatus={true} ajaxCallStatus={this.props.submitStatus}/>
            </div>
        </div>
        <div className="form-nav-button-wrapper">
            <FormButton faClass="fa-backward" label="Previous" clickHandler={this.props.formNavigation} navId={this.props.prevId} />
            <FormButton faClass="fa-floppy-o" label="Save" clickHandler={this.props.save} showsStatus={true} ajaxCallStatus={this.props.saveStatus}/>
            <FormButton faClass="fa-ban" label="Cancel" cssClass="form-nav-cancel" />
            <FormButton faClass="fa-hand-paper-o" label="On Hold" />
            <FormButton faClass="fa-forward" label="Next" clickHandler={this.props.formNavigation} navId={this.props.nextId}/>
        </div>
        </nav>
    );
    }
}

这是d.ts文件列表：

fi.mvc\node_modules\@types\react\index.d.ts
fi.mvc\node_modules\@types\react-dom\index.d.ts
fi.mvc\node_modules\@types\react-dom\server\index.d.ts
fi.mvc\node_modules\@types\react-dom\test-utils\index.d.ts
fi.mvc\node_modules\ajv\lib\ajv.d.ts
fi.mvc\node_modules\hash.js\lib\hash.d.ts
fi.mvc\node_modules\iconv-lite\lib\index.d.ts
fi.mvc\node_modules\promise\index.d.ts
fi.mvc\node_modules\typescript\lib\lib.d.ts
fi.mvc\node_modules\typescript\lib\lib.dom.d.ts
fi.mvc\node_modules\typescript\lib\lib.dom.iterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.collection.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.core.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.generator.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.iterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.promise.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.proxy.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.reflect.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.symbol.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2015.symbol.wellknown.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.array.include.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2016.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.intl.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.object.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.sharedmemory.d.ts
fi.mvc\node_modules\typescript\lib\lib.es2017.string.d.ts
fi.mvc\node_modules\typescript\lib\lib.es5.d.ts
fi.mvc\node_modules\typescript\lib\lib.es6.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.asynciterable.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.d.ts
fi.mvc\node_modules\typescript\lib\lib.esnext.full.d.ts
fi.mvc\node_modules\typescript\lib\lib.scripthost.d.ts
fi.mvc\node_modules\typescript\lib\lib.webworker.d.ts
fi.mvc\node_modules\typescript\lib\protocol.d.ts
fi.mvc\node_modules\typescript\lib\tsserverlibrary.d.ts
fi.mvc\node_modules\typescript\lib\typescript.d.ts
fi.mvc\node_modules\typescript\lib\typescriptServices.d.ts

Answer 1

像往常一样，答案是微不足道的。当前的@ types / react版本（15.0.38）打破了我的项目，恢复到早期版本，使一切工作再次完美。

typescript react - 组件类无法确定它需要多少类型

1 个答案: