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

Question

当我在组件渲染方法中通过 props 进行映射时，我可以将 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);
  }

});

因此，在此示例中，在映射类别时，我想传递单个类别的名称，以便可以解析链接。当然，对象具有链接属性是有意义的，但在本例中却没有。

传递到组件 props 的类别对象示例

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

Answer 1

在 .map 中绑定(bind)函数不是一个好主意，因为即使没有其他 prop 更改，您总是要将新函数传递给组件。这意味着它总是会被重新渲染，即使它不是必须的。

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

1. 没有变量名称。
2. 您错误地使用了 .bind。

调用应该是

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

传递给bind.bind的第一个参数是this的值，而不是第一个参数(你应该知道，因为你是也使用 .bind(this))。

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