React - this.props看起來沒有定義

我正在閱讀React教程。下面是我添加屬性到迎賓對象React - this.props看起來沒有定義

let Greeter=React.createClass({ 
    render:()=>{ 
     let name=this.props.name; 
     return (<div> 
     <h1>Hello {name}!</h1> 
    </div>); 
    } 
}); 



ReactDOM.render(
    <Greeter name ="Your name"/>, 
    document.getElementById("app") 
);

將不會呈現在所有的，當我使用Firefox瀏覽器不工作的代碼，這是我得到：

unreachable code after return statementbrowser.min.js:37:6409 TypeError: undefined has no properties

來源

2016-11-06 alt-ja

這不起作用的原因是因爲您在ES5組件內使用箭頭函數。 this是那麼不確定，由於箭頭的功能，每the MDN documentation for arrow functions：

An arrow function expression has a shorter syntax compared to function expressions and does not bind its own this , arguments, super, or new.target. (emphasis mine)

不做出反應一些所謂'autobinding'這一個組件自動綁定this您的功能來指代組件。但是因爲您使用的是箭頭函數，綁定不起作用（由於事實，如前所述，箭頭函數不會綁定this）。這意味着this未被綁定，因此它在您的render函數中未定義。這會導致錯誤，因爲undefined沒有任何屬性。

的解決方案是使用常規的功能，而不是一個箭頭的功能與之反應的自動綁定：

render: function() { 
    //... 
}

陣營autobind的this，以便它指的是在功能部件，因此將正常工作。如果你正在使用ES6，您可以使用ES6方法，像這樣：

render() { 
    //... 
}

這是ES6對於一個普通函數只是語法糖，並結合會發生。因此，this將引用該組件，而不是未定義的，並將正確接收道具。

來源

2016-11-06 18:31:56 Li357

我沒有downvote內，他們的反應不會自動綁定處理程序。你必須自己綁定它們。請參閱http://stackoverflow.com/questions/40445631/undefined-is-not-an-object-evaluating-this-state/40445678#40445678 Angular2不會自動綁定他們無論如何，也很難說出你在說什麼。解釋它的一個更清晰的方法是，在這個箭頭函數中的'this'就像在定義類之前做了console.log（this）一樣（在嚴格模式下定義爲undefined，在常規模式下爲窗口）將其更改爲常規功能意味着它將使用通話時間'this' –

@JuanMendes你在看什麼是* ES6類*，它不*自動綁定。相反，ES5和'createClass' *會自動綁定。參見[這裏]（https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html）和關於自動綁定的部分。 – Li357

我們可能與自動綁定的含義不同。我會添加另一個答案，因爲我認爲你的答案讓它聽起來更復雜。 –

這是因爲您正在使用fat arrow function。與常規函數不同，胖箭頭函數沒有按其調用方式綁定它的this。這是在緊接着的外部環境中設定的。

例如，您的代碼可以重寫爲以下內容，並且它會做同樣的事情（這就是transpilers所做的）。

// _this will be window in regular mode and undefined in strict mode 
let _this = this; 
let Greeter = React.createClass({ 
    render: function() { 
     let name = _this.props.name; 
     return (
     <div> 
      <h1>Hello {name}!</h1> 
     </div> 
    ); 
    } 
}); 



ReactDOM.render(
    <Greeter name ="Your name"/>, 
    document.getElementById("app") 
);

修復它通過使用常規的功能，因爲作出反應會調用component.render()，設置this是component渲染功能

來源

2016-11-09 22:53:21

因爲那是緊鄰的範圍，所以'this'指向那個胖箭頭函數。在OP的情況下，它是'window'和'window.props'是未定義的。如果OP設置'window.props = {name：'yo'}'，你會看到會發生什麼 –

是的，我誤解了你的帖子。問題是ES5組件默認綁定了'this'（自動綁定），所以'render'裏面的'this'仍然是組件。 – Li357

我不知道你的意思是「ES5組件具有'this'默認綁定」如果你將它改爲常規函數，它將在ES5和ES6中工作，它們的行爲方式與你解釋的一樣，它只是句法糖。你能指點我一些關於ES5/6中這種不同的文檔嗎？ –

React - this.props看起來沒有定義

回答

相關問題