typescript - JSX-elementtypen 'XXX' har inga konstruktions- eller anropssignaturer

Jag vill använda material-ui i typescript.

/// <reference path="../../../typings/react/react.d.ts"/>
import React = __React;
import * as FlatButton from "material-ui/lib/flat-button";

interface ATCProps{
    clickHandler:__React.MouseEventHandler;
}

export default class AddToCartBtn extends React.Component<ATCProps,any>{
    render(){
        return (
            <FlatButton></FlatButton>  // -> error
        )
    }
}

flat-button.d.ts

declare module "material-ui/lib/flat-button" {
    import ReactElement = __React.ReactElement;
    import Component = __React.Component;
    interface FlatButton extends __React.Component<any,any>{
    }
    export default FlatButton;
}

Fel:(15, 14) TS2604: JSX-elementtypen 'FlatButton' har inga konstruktions- eller anropssignaturer.

Svar #1

Du behöver ersätta interface FlatButton med class FlatButton. Moduldefinitionen du har exporterat har inget värde kopplat till sig.

Svar #2

Först: prova detta.

import FlatButton from "material-ui/lib/flat-button";

För det andra: varför detta?

Det är standardexporter.

// fileA: export default module
declare let $: JQuery;
export default $;

// fileB: import module from default module
import $ from "jquery";

om material-ui/lib/flat-button är 'default exports', bör vi använda en annan importform.

Tredje: vad händer när import * as FlatButton from "XXX"

import * as FlatButton from "XXX" betyder att importera hela modulen till en enda variabel.

// the outcome is an object with a default property
{
  default: FlatButton(props)
}

mer i moduler: standardexporter.

Relaterade artiklar