ReactJS 问题：() => vs 函数 ()

Question

正在关注他们网站上的 ReactJS 教程。

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: () => {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke"> This is *another* comment</Comment>
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: () => {
    return (
      <div className="commentForm">
        Comment Form
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: () => {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm/>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById("content")
);

但是，如果我在第一个组件注释中使用箭头符号，即：

(*参数*) => {}

代替正常的函数声明符号，即：

函数(*参数*){}

chrome解释器会吐出以下错误：

未捕获的类型错误：无法读取未定义的属性 'props'

任何人都可以对此事有所了解吗？

Answer 1

箭头函数不会绑定 this。因此，如果您将 render 函数创建为箭头函数，则 this 将不会绑定到当前组件。

因此，对于 render 和其他属于您的组件并需要以 this 身份访问该组件的方法，您需要使用真正的函数。不过，您可以对嵌套函数使用箭头函数（使用它们更有意义）。

ReactJS 问题：() => vs 函数 ()

ReactJS issue: () => vs function ()

javascript

reactjs

arrow-functions