我有一个看起来像这样的组件:
class MyView extends React.Component<{}, {}> {
render() {
console.log((this.props as any).params); // prints empty object
return (
<div>Sample</div>
);
}
}
我想打印URL查询参数但我得到一个空对象。 (是的,我知道我将{}声明为道具,但如果我没有定义它,它就不会编译)。
有没有办法将“默认”道具对象传递给我的组件,以便我可以访问this.props.params
?或者应该在TypeScript中以不同的方式完成?
答案 0 :(得分:2)
您需要定义道具和州的类型,然后将它们放在{}
上
目前尚不清楚您想要获取“URL查询参数”,因此我只需从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¶m2=value2...."
return (
<div>Sample</div>
);
}
}
ReactDOM.render(<MyView props={ window.location.search.substring(1) } />, document.getElementById("container"));
答案 1 :(得分:0)
要为组件指定默认属性,您应该使用defaultProps:
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了解详情。