2016-05-16 16 views
9

Sto usando React con TypeScript e ho creato la funzione stateless. Ho rimosso il codice inutile dell'esempio per la leggibilità.Reagire con TypeScript - definire defaultProps in funzione stateless

interface CenterBoxProps extends React.Props<CenterBoxProps> { 
    minHeight?: number; 
} 

export const CenterBox = (props: CenterBoxProps) => { 
    const minHeight = props.minHeight || 250; 
    const style = { 
     minHeight: minHeight 
    }; 
    return <div style={style}>Example div</div>; 
}; 

Tutto è perfetto e questo codice funziona correttamente. Ma c'è una mia domanda: come posso definire defaultProps per il componente CenterBox?

come è menzionato in react docs:

(...) They are pure functional transforms of their input, with zero boilerplate. However, you may still specify .propTypes and .defaultProps by setting them as properties on the function, just as you would set them on an ES6 class. (...)

dovrebbe essere facile come:

CenterBox.defaultProps = { 
    minHeight: 250 
} 

Ma questo codice genera l'errore TSLint: Quindi, di nuovo error TS2339: Property 'defaultProps' does not exist on type '(props: CenterBoxProps) => Element'.

: come posso correttamente definire defaultProps nel mio stack sopra (React + TypeScript)?

risposta

10

Dopo 2 ore di ricerca della soluzione ... funziona.

Se si vuole definire deufaultProps la linea che definisce la funzione dovrebbe apparire come:

export const CenterBox: React.SFC<CenterBoxProps> = props => { 
    (...) 
}; 

Quindi è possibile definire oggetti di scena come:

CenterBox.defaultProps = { someProp: true } 

noti che React.SFC è alias per React.StatelessComponent.

Spero che questa domanda (e risposta) aiuti qualcuno. Assicurati di aver installato le tipizzazioni React più recenti.

+2

potresti aggiungere un esempio più specifico sul funzionamento di defaultProps? grazie: D –

2

Ed ecco come funziona per le funzioni di stato nel caso in cui altri inciampare su questo. La chiave sta dichiarando defaultProps come variabile statica.

interface IBoxProps extends React.Props<IBoxProps> { 
    x?: number; 
    y?: number; 
    height?: number; 
    width?: number; 
} 

interface IBoxState { 
    visible?: boolean; 
} 

export default class DrawBox extends React.Component<IBoxProps, IBoxState> { 
    static defaultProps: IBoxProps; 

    constructor(props: IBoxProps) { 
     super(props); 
    } 
    ... 
} 

DrawBox.defaultProps = { 
    x=0; 
    y=0; 
    height=10; 
    weight=10; 
}; 
Problemi correlati