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

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

（* params *）=＆gt; {}

代替正常的函数声明表示法，即：

功能（* params *）{}

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

未捕获的TypeError：无法读取属性＆＃39;道具＆＃39;未定义的

任何人都可以对这件事情发表一些看法吗？

Answer 1

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

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

ReactJS问题：（）=＆gt; vs function（）

1 个答案: