映射时将props参数传递给React.js中的函数

Question

当我在组件render方法中通过prop映射时，可以将prop值传递给函数。 我忘记了正确的方法。 例如，我有一个类别标签控件，该控件仅列出了一些具有名称的类别，但是onClick我想为单个类别执行一些功能。

var React = require("react");

var CategoryTags = React.createClass({

  propTypes: {
    categories: React.PropTypes.array.isRequired
  },

  render: function() {

      var categoryRows = this.props.categories.map(function (c, i) {

        return (
            <button onClick={ this.linkToCategory.bind(name) } >
              {c.name}
            </button>
        );

      }.bind(this));

    return (
        <span>{categoryRows}</span>
    );

  },

  linkToCategory: function (c) {
    console.log(c);
  }

});

因此，在此示例中，在通过类别进行映射时，我想传递各个类别的名称，以便我可以解析链接。 当然，对象具有链接属性是有意义的，但在这种情况下则没有。

将类别对象传递给组件prop的示例

categories = [{'name': 'cat1'}, {'name': 'cat2'}];

Answer 1

在.map内绑定一个函数不是一个好主意，因为即使没有其他属性更改，您也总是要将新函数传递给组件。 这意味着它将始终被重新渲染，即使不必如此。

但是无论如何，代码的问题是

1. 没有变量name 。
2. 您使用的.bind错误。

电话应该是

this.linkToCategory.bind(this, c.name)

传递给bind .bind的第一个参数是this的值，而不是第一个参数（由于您也使用.bind(this) ，因此应该知道.bind(this) ）。

您可以在MDN文档中了解有关.bind更多信息。

Answer 2

您还可以从事件处理程序中返回一个函数：

var CategoryTags = React.createClass({

  propTypes: {
    categories: React.PropTypes.array.isRequired
  },

  render: function() {

      var categoryRows = this.props.categories.map(function (c, i) {

        return (
            <button onClick={this.linkToCategory(c)} >
              {c.name}
            </button>
        );

      }.bind(this));

    return (
        <span>{categoryRows}</span>
    );

  },

  linkToCategory: function (c) {
      return () => {
          console.log(c);
      }
  }

});