Erhalten Sie Abfrageparameter in Reaktion, Typoskript

Question

Ich habe eine Komponente, die wie folgt aussieht:

class MyView extends React.Component<{}, {}> { 
    render() { 
     console.log((this.props as any).params); // prints empty object 
     return (
      <div>Sample</div> 
     ); 
    } 
} 

Ich möchte die URL Abfrage params drucken, aber ich bekomme ein leeres Objekt. (Ja, ich weiß, dass ich {} als Props deklariert habe, aber wenn ich es nicht definiere, kompiliert es nicht).

Gibt es eine Möglichkeit, ein "Standard" Requisiten-Objekt an meine Komponente zu übergeben, so dass ich auf this.props.params zugreifen kann? Oder sollte es anders in TypeScript gemacht werden?

Answer 1

Sie müssen die Typen für die Requisiten und den Zustand definieren und sie dann anstelle der {} setzen.
Es ist nicht klar, wo Sie die „URL Abfrage params“ erhalten wollen, so werde ich sie nur vom window.location Objekt nehmen:

interface MyViewProperties { 
    params: string; 
} 

interface MyViewState {} 

class MyView extends React.Component<MyViewProperties, MyViewState> { 
    render() { 
     console.log(this.props.params); // should print "param1=value1&param2=value2...." 
     return (
      <div>Sample</div> 
     ); 
    } 
} 

ReactDOM.render(<MyView props={ window.location.search.substring(1) } />, document.getElementById("container")); 

Answer 2

Um Standardeigenschaften einer Komponente zuweisen Sie defaultProps verwenden sollten:

class MyView extends React.Component<{}, {}> { 
    render() { 
     console.log((this.props as any).params); // prints empty object 
     return (
      <div>Sample</div> 
     ); 
    } 
} 

MyView.propTypes = { 
    url: React.PropTypes.string 
} 

MyView.defaultProps = { 
    url: '' 
} 

prüfen the official docs für weitere Informationen.