未捕获的TypeError:无法读取null的属性“props”
未捕获的TypeError:无法读取null的属性“props”
提问于 2016-02-10 06:31:51
此代码在UI中呈现各种面板。当我单击标记时，此函数名为sportsCornerPanel()
- but I the
- it TypeError
snippet code。< code >H111完整代码您可以在小提琴中看到它
代码片段
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回答 4
Stack Overflow用户
回答已采纳
发布于 2016-02-10 09:41:55
因为您没有在类方法中使用React.createClass，所以this没有引用组件实例，所以您应该手动绑定它。有几种方法：
1.在类构造函数中手动绑定 this
constructor(props) {
super(props);
this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}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.在调用点绑定 this
在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>;
}
}
}Stack Overflow用户
发布于 2018-04-11 19:27:13
在构造函数中声明一个局部变量来捕获上下文。
我在使用class className extends React.Component而不是createClass()时也遇到了同样的问题。在构造函数中创建一个变量来修复这个问题。
constructor(props) {
super(props);
self = this;
}到处使用self.props而不是this.props！
Stack Overflow用户
发布于 2016-02-10 07:00:29
看起来您的React组件上可能缺少一个getDefaultProps方法。你可以像这样考虑一些通用的东西，只是为了消除错误，看看还有什么问题：
getDefaultProps () { return {}; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35303490
复制相关文章
相似问题