、中にクエリパラメータが反応活字体

Question

を取得し、私はこのようになりますコンポーネントを持っています。 （はい、私は{}を小道具と宣言していますが、私が定義していない場合はコンパイルしません）。

this.props.paramsにアクセスできるように、「デフォルト」の小道具オブジェクトをコンポーネントに渡す方法はありますか？または、それはTypeScriptで別の方法で行われるべきですか？

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: '' 
} 

チェックthe official docs詳細については：あなたはdefaultPropsを使用する必要があるコンポーネントにデフォルトのプロパティを割り当てるには

Answer 1

{}の代わりに、propsとstateのタイプを定義してから配置する必要があります。
あなたは「URLクエリのparams」を取得したい場所は明らかではありませんので、私はちょうどwindow.locationオブジェクトからそれらを取るよ：

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

。