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

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

Answer 1

这不起作用的原因是因为您在ES5组件中使用了箭头功能。由于箭头函数，每个the MDN documentation for arrow functions：

，this未定义

与函数表达式相比，箭头函数表达式的语法更短，而不绑定自己的this，参数，超级或new.target。（强调我的）

React执行名为'autobinding'的操作，它会自动为组件中的函数绑定this以引用该组件。但是因为你正在使用箭头函数，所以绑定不起作用（由于事实，如前所述，箭头函数不绑定this）。这意味着this没有绑定，因此在render函数中未定义render: function() { //... }。这会导致错误，因为undefined没有任何属性。

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

this

对自动绑定render() { //... }进行反应，以便它引用函数中的组件，以便它可以正常工作。如果您使用的是ES6，则可以使用如下的ES6方法：

this

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

Answer 2

这是因为您使用的是fat arrow function。与常规函数不同，胖箭头函数的this不受其调用方式的约束。这是在外在背景下的情况。

例如，您的代码可以按如下方式重写，它会做同样的事情（这就是转换器所做的事情）。

// _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")
);

使用常规函数修复它，因为React会调用component.render()，在渲染函数中将this设置为component

React - this.props看起来未定义

2 个答案: