blocks|key|118417|text|看起来您的React组件上可能缺少一个getDefaultProps方法。你可以像这样考虑一些通用的东西，只是为了消除错误，看看还有什么问题：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|118418|getDefaultProps+()+{+return+{};+}|118419|entityMap^0|J|F|0|0|X|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

It looks like you might be missing a <code>getDefaultProps</code> method on your React component. You might consider something generic like this, just to nullify the error and see what else is up:

<code>getDefaultProps () { return {}; }</code>

blocks|key|2883741|text|因为您没有在类方法中使用React.createClass，所以this没有引用组件实例，所以您应该手动绑定它。有几种方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2883742|1.在类构造函数中手动绑定+this+|BOLD|2883743|constructor(props)+{
++++super(props);
++++this.sportsCornerPanel=+this.sportsCornerPanel.bind(this);
}|code-block|syntax|javascript|2883744|2.使用带有箭头函数的ES7属性初始值设定项|2883745|sportsCornerPanel+=+()+=>+{
++++debugger;

++++console.log("sportsCornerPanel"
++++console.log("this.props.sportsPanelState.size-->"+%2B+this.props);

++++if+(this.props.sportsPanelState.size+===+'hidden')+{

++++++++if+(!this.props.sportsPanelState.visible)+{
++++++++++++this.props.dispatch(sportsOpenPanel());
++++++++}+else+{
++++++++++++this.props.dispatch(sportsClosePanel());
++++++++}
++++}
}|2883746|3.在调用点绑定+this+|2883747|在render()方法中：|2883748|++++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>;
++++++++++++}
++++++++}
++++}|2883749|entityMap^0|C|H|W|4|0|0|8|E|4|E|4|0|0|0|M|0|0|0|8|9|4|9|4|0|0|D|1|8|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]|$9|17|A|18|B|H]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1C|8|@$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1G|8|@$9|1H|A|1I|B|H]|$9|1J|A|1K|B|H]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1N|8|@$9|1O|A|1P|B|H]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|V|3|W|5|K|7|1S|8|@]|D|@]|E|$L|M]]|$1|X|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|Y|$]]

Since you are not using <code>React.createClass</code> in class methods <code>this</code> doesn't refers to the component instance, so you should bind it manually. There are several ways: 

1. Manually bind <code>this</code> in class constructor

<pre><code>constructor(props) {
 super(props);
 this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}
</code></pre>

2. Use ES7 Property initializers with arrow function

<pre><code>sportsCornerPanel = () =&gt; {
 debugger;

 console.log("sportsCornerPanel"
 console.log("this.props.sportsPanelState.size--&gt;" + this.props);

 if (this.props.sportsPanelState.size === 'hidden') {

 if (!this.props.sportsPanelState.visible) {
 this.props.dispatch(sportsOpenPanel());
 } else {
 this.props.dispatch(sportsClosePanel());
 }
 }
}
</code></pre>

3. Bind <code>this</code> at call-site

In <code>render()</code> method:

<pre><code> 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 = &lt;SportsBox className="sports-header"/&gt;;
 } else {
 if (this.props.sportsPanelState.visible) {
 console.log("sportsPanelState--when it becomes small--around ipad width");

 sportsContent = &lt;SportsBox className="sports-nav"/&gt;;
 leftNavLink = &lt;a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"&gt;&lt;/a&gt;;
 } else {
 if (this.props.sports.active) {

 console.log("SportsBox");

 sportsContent = &lt;SportsBox className="sports-nav"/&gt;;
 } else {

 console.log("leftNavLink--when it becomes small--around ipad width");

 leftNavLink = &lt;a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"&gt;&lt;/a&gt;;
 }
 }
 }
</code></pre>

blocks|key|121323|text|在构造函数中声明一个局部变量来捕获上下文。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121324|我在使用class+className+extends+React.Component而不是createClass()时也遇到了同样的问题。在构造函数中创建一个变量来修复这个问题。|offset|length|style|CODE|121325|constructor(props)+{
++++super(props);
++++self+=+this;
}|code-block|syntax|javascript|121326|到处使用self.props而不是this.props！|121327|entityMap^0|0|4|13|1A|D|0|0|4|A|H|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

Declare a local variable in constructor for capturing context.

I faced the same issue while using <code>class className extends React.Component</code> instead of <code>createClass()</code>. Create a variable in constructor to fix this.

<pre><code>constructor(props) {
 super(props);
 self = this;
}
</code></pre>

Use <code>self.props</code> instead of <code>this.props</code> everywhere!

blocks|key|119340|text|在构造函数中绑定该方法工作得非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119341|class+Example+extends+Component+{

++constructor(props)+{
++++super(props);
++++this.homeButtonClicked=+this.homeButtonClicked.bind(this);
++}
}|code-block|syntax|javascript|119342|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<h1>binding the method in constructor worked absolutely fine.</h1>

<pre><code>class Example extends Component {

 constructor(props) {
 super(props);
 this.homeButtonClicked= this.homeButtonClicked.bind(this);
 }
}
</code></pre>

<ul>
<li>I have a react code</li>
<li>this code renders various panels in the UI.</li>
<li>when I click a tag, this function is called sportsCornerPanel()</li>
<li>but I am getting the Uncaught TypeError how to fix it</li>
<li>providing snippet code below.</li>
<li>whole code you can see it in the fiddle</li>
</ul>

code snippet

<pre><code> sportsCornerPanel() {
 debugger;

 console.log("sportsCornerPanel"
 console.log("this.props.sportsPanelState.size--&gt;" + 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 = &lt;SportsBox className="sports-header"/&gt;;
 } else {
 if (this.props.sportsPanelState.visible) {
 console.log("sportsPanelState--when it becomes small--around ipad width");

 sportsContent = &lt;SportsBox className="sports-nav"/&gt;;
 leftNavLink = &lt;a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink active"&gt;&lt;/a&gt;;
 } else {
 if (this.props.sports.active) {

 console.log("SportsBox");

 sportsContent = &lt;SportsBox className="sports-nav"/&gt;;
 } else {

 console.log("leftNavLink--when it becomes small--around ipad width");

 leftNavLink = &lt;a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink"&gt;&lt;/a&gt;;
 }
 }
 }


output

Uncaught TypeError: Cannot read property 'props' of null
</code></pre>

Uncaught TypeError: Cannot read property 'props' of null

此代码在UI中呈现各种面板。当我单击标记时，此函数名为sportsCornerPanel()but I the it TypeError snippet code。< code >H111</ code >完整代码您可以在小提琴中看到它代码片段 sportsCornerPanel() { deb...

问未捕获的TypeError:无法读取null的属性“props”
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获的TypeError:无法读取null的属性“props”EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获的TypeError:无法读取null的属性“props”
EN