1

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

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

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

代码运行良好

重构之前

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在类构造函数中手动绑定呢？

4

2 回答 2

2

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

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被绑定到组件上。

于 2016-11-04T15:47:45.063 回答
0

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

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

于 2016-11-04T15:41:51.903 回答