React - this.props看起来未定义

Question

我正在阅读React教程.这是我向Greeter对象添加属性时不起作用的代码

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时,这就是我得到的:

return statementbrowser.min.js:37:6409之后无法访问的代码TypeError:undefined没有属性

Answer 1

这不起作用的原因是因为您在ES5组件中使用了箭头功能.this根据箭头函数的MDN文档,由于箭头函数,因此未定义:

与函数表达式相比,箭头函数表达式具有更短的语法,并且不绑定其自己的this参数,超级或new.target.(强调我的)

React执行称为"自动绑定"的操作,它会自动绑定this组件中的函数以引用组件.但是因为你正在使用箭头功能,绑定不起作用(由于事实,如前所述,箭头函数不绑定this).这意味着this没有约束,因此它在您的render函数中是未定义的.这会导致错误,因为undefined没有任何属性.

解决方案是使用常规函数而不是使用React自动绑定的箭头函数:

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

反应自动绑定,this以便它引用函数中的组件,以便它可以正常工作.如果您使用的是ES6,则可以使用ES6方法,如下所示:

render() {
    //...
}

这只是ES6中常规函数的语法糖,并且会发生绑定.因此,this将引用组件,而不是未定义,并将正确接收道具.