未捕获的类型错误：无法在 React 类中读取 null 的属性“props”[重复]

Question

我已经重构了一个组件，我不再在类方法中使用React.createClass，但我现在遇到了这个错误

{this.props.removeComment.bind(null, this.props.params.svgId, i)}

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

代码运行良好

重构之前

import React from 'react';

const Comments = React.createClass({
  renderComment(comment, i) {
    return (
      <div className="comment" key={i}>
        <p>
          <strong>{comment.user}</strong>
          {comment.text}
          <button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.svgId, i)}>&times;</button>
        </p>
      </div>
    )
  },

  handleSubmit(e) {
    e.preventDefault();
    const { svgId } = this.props.params;
    const author = this.refs.author.value;
    const comment = this.refs.comment.value;
    this.props.addComment(svgId, author, comment);
    this.refs.commentForm.reset();
  },

  render() {
    return (
      <div className="comments">
        {this.props.svgComments.map(this.renderComment)}
        <form ref="commentForm" className="comment-form" onSubmit={this.handleSubmit}>
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden />
        </form>
      </div>
    )
  }
});

export default Comments;

重构之后

import React from 'react';

export default class Comments extends React.Component {
  renderComment(comment, i) {
    return (
      <div className="comment" key={i}>
        <p>
          <strong>{comment.user}</strong>
          {comment.text}
          <button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.svgId, i)}>&times;</button>
        </p>
      </div>
    )
  };

  handleSubmit(e) {
    e.preventDefault();
    const { svgId } = this.props.params;
    const author = this.refs.author.value;
    const comment = this.refs.comment.value;
    this.props.addComment(svgId, author, comment);
    this.refs.commentForm.reset();
  };

  render() {
    return (
      <div className="comments">
        {this.props.svgComments.map(this.renderComment)}
        <form ref="commentForm" className="comment-form" onSubmit={this.handleSubmit}>
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden />
        </form>
      </div>
    )
  }
};

那么如何在类构造函数中手动绑定this？

Answer 1

你需要像这样在构造函数中将方法绑定到组件实例

export default class Comments extends React.Component {
  constructor() {
    super();

    this.renderComment = this.renderComment.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

如果你在 stage-2 中使用 babel，你也可以重构你的方法，只需执行以下操作：

renderComment = (comment, i) => {
  // code goes here    
}

handleSubmit = (e) => {
  // code goes here
}

我更喜欢第二种方式，因为它更干净，但必须有正确的 babel 插件才能正常工作。

这样做是为了确保在调用这些函数时，它们被调用时 this 被绑定到组件。

Answer 2

你应该有一个构造函数，调用super()并在那里绑定方法

React.createClass 自动将 this 绑定到组件，在 ES6 类中你必须手动创建它，并且在调用 super() 之前你不能使用 this