Question

我决定学习React并开始使用官方教程。一切都很好，直到我达到我的代码状态：

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

var CommentForm = React.createClass({
  render: () => {
    return (
      <div className="commentForm">
        Hello, world! I am a comment form;
      </div>
    );
  }
});

var Comment = React.createClass({
  rawMarkup: () => {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render: () => {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2> // <--- [[[[[[ ERROR IS HERE ]]]]]]
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </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 yo</Comment>
      </div>
    );
  }
});

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

当我尝试运行它时，我在devtools中收到以下错误：

TypeError：无法读取未定义
的属性'props'

...并且调试器在标记的行处暂停（参见代码）。当我在this中鼠标悬停{this.props.author}时，我会预览具有props属性和所有内容的对象...

Answer 1

使用函数声明（render() {}或render: function {}）代替箭头函数render: () => {}

var Comment = React.createClass({
  rawMarkup() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </div>
    );
  }
});

Example

与函数表达式相比，arrow function表达式具有更短的语法，并且词汇绑定此值（不绑定它自己的this，arguments，super或new.target）。箭头功能始终是匿名的。

Answer 2

我收到了同样的错误消息：

无法阅读属性＆＃39;道具＆＃39;未定义的

... ，但原因不同：从函数中调用this时，javascript无法访问该变量，因为 this位于外部范围。（注：我在ES5）

在这种情况下，只需将this存储在函数之前的另一个变量中（在您的组件范围内）： var that = this;

然后，您就可以在该功能中调用 that.props 。

希望这有助于其他有错误信息的人。

以下详细示例：

＆＃13;

render: function() {
  var steps = [];
  var that = this;  // store the reference for later use
  var count = 0;
  this.props.steps.forEach(function(step) {
      steps.push(<Step myFunction={function(){that.props.anotherFunction(count)}}/>);  // here you are
      count += 1;
  });
  return (
    <div>{steps}</div>
  )
}

＆＃13;

Answer 3

稍晚一些的帖子/答案。

尝试将函数绑定到构造函数中

示例：

this.yourfunction = this.yourfunction.bind(this);

Answer 4

我在ES6上，而箭头函数成功了：rawMarkup =（）=> {}

React Tutorial：TypeError：无法读取未定义的属性'props'

4 个答案: