[英]Uncaught TypeError: Cannot read property 'props' of null
code snippet 代码段
sportsCornerPanel() {
debugger;
console.log("sportsCornerPanel"
console.log("this.props.sportsPanelState.size-->" + this.props);
if (this.props.sportsPanelState.size === 'hidden') {
if (!this.props.sportsPanelState.visible) {
this.props.dispatch(sportsOpenPanel());
} else {
this.props.dispatch(sportsClosePanel());
}
}
}
render() {
let sportsContent, leftNavLink;
if (this.props.sports-layout !== 'small') {
console.log("SportsBox---page loads at bigger size");
console.log("SportsBox---page loads at ipad size");
sportsContent = <SportsBox className="sports-header"/>;
} else {
if (this.props.sportsPanelState.visible) {
console.log("sportsPanelState--when it becomes small--around ipad width");
sportsContent = <SportsBox className="sports-nav"/>;
leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink active"></a>;
} else {
if (this.props.sports.active) {
console.log("SportsBox");
sportsContent = <SportsBox className="sports-nav"/>;
} else {
console.log("leftNavLink--when it becomes small--around ipad width");
leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink"></a>;
}
}
}
output
Uncaught TypeError: Cannot read property 'props' of null
Since you are not using React.createClass
in class methods this
doesn't refers to the component instance, so you should bind it manually. 既然你不使用
React.createClass
类方法this
并不指的是组件实例,所以你应该手动绑定。 There are several ways: 有几种方法:
1. Manually bind this
in class constructor 1.在类构造函数中手动绑定
this
constructor(props) {
super(props);
this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}
2. Use ES7 Property initializers with arrow function 2.使用带箭头功能的ES7属性初始值设定项
sportsCornerPanel = () => {
debugger;
console.log("sportsCornerPanel"
console.log("this.props.sportsPanelState.size-->" + this.props);
if (this.props.sportsPanelState.size === 'hidden') {
if (!this.props.sportsPanelState.visible) {
this.props.dispatch(sportsOpenPanel());
} else {
this.props.dispatch(sportsClosePanel());
}
}
}
3. Bind this
at call-site 3.绑定
this
在调用点
In render()
method: 在
render()
方法中:
let sportsContent, leftNavLink;
if (this.props.sports-layout !== 'small') {
console.log("SportsBox---page loads at bigger size");
console.log("SportsBox---page loads at ipad size");
sportsContent = <SportsBox className="sports-header"/>;
} else {
if (this.props.sportsPanelState.visible) {
console.log("sportsPanelState--when it becomes small--around ipad width");
sportsContent = <SportsBox className="sports-nav"/>;
leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"></a>;
} else {
if (this.props.sports.active) {
console.log("SportsBox");
sportsContent = <SportsBox className="sports-nav"/>;
} else {
console.log("leftNavLink--when it becomes small--around ipad width");
leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"></a>;
}
}
}
Declare a local variable in constructor for capturing context. 在构造函数中声明一个局部变量以捕获上下文。
I faced the same issue while using class className extends React.Component
instead of createClass()
. 我在使用
class className extends React.Component
时遇到了同样的问题, class className extends React.Component
而不是createClass()
。 Create a variable in constructor to fix this. 在构造函数中创建一个变量来修复它。
constructor(props) {
super(props);
self = this;
}
Use self.props
instead of this.props
everywhere! 到处使用
self.props
而不是this.props
!
It looks like you might be missing a getDefaultProps
method on your React component. 看起来您可能在React组件上缺少
getDefaultProps
方法。 You might consider something generic like this, just to nullify the error and see what else is up: 您可能会考虑像这样的通用,只是为了使错误无效并查看其他内容:
getDefaultProps () { return {}; }
class Example extends Component {
constructor(props) {
super(props);
this.homeButtonClicked= this.homeButtonClicked.bind(this);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.