Question

我试图将react js函数转换为类，但我不知道如何完全转换它，请查看此函数并为我正确转换。

原始功能

 code :var MailboxList = React.createClass({render: function() {
var mailbox_list = this.props.mailboxes.map(function(mailbox) {
  return (
    <li className="list-group-item"
        key={mailbox.id}
        onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}>
      <span className="badge">
        {mailbox.emails.length}
      </span>{mailbox.name}</li>);}.bind(this));
 return (
<divclassName="col-md-2">
<ul className="mailboxes list-group">
{mailbox_list}</ul>
</div>);
}});

Answer 1

我建议使用最新的方式与babel 6构建组件。

作为功能

export default function MailboxList({ mailboxes }) {
  const mailbox_list = mailboxes.map((mailbox) =>
    (
      <li className="list-group-item"
        key={mailbox.id}
        onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}
      >
        <span className="badge">
          {mailbox.emails.length}
        </span>{mailbox.name}</li>
    ));

  return (
    <div className="col-md-2" >
      <ul className="mailboxes list-group">
        {mailbox_list}</ul>
    </div>
  );
}

作为班级

export default class MailboxList extends React.Component {

  renderMailboxList = () => {
    return (
      this.props.mailboxes.map((mailbox) => (
        <li className="list-group-item"
          key={mailbox.id}
          onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}
        >
          <span className="badge">
            {mailbox.emails.length}
          </span>
          {mailbox.name}
        </li>
      ))
    )
  }

  render() {
    return (
      <div className="col-md-2" >
        <ul className="mailboxes list-group">
          {this.renderMailboxList}</ul>
      </div>
    );
  }
}

将React-Js函数转换为class

1 个答案: