当我在组件渲染方法中通过道具进行映射时,是否可以将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的类别对象的示例
categories = [{'name': 'cat1'}, {'name': 'cat2'}];
答案 0 :(得分:2)
绑定.map
内的函数不是一个好主意,因为即使没有其他道具发生变化,您总是会将新函数传递给组件。这意味着它将永远被重新渲染,即使它不是必须的。
但无论如何,您的代码存在的问题是
name
。.bind
。电话应该是
this.linkToCategory.bind(this, c.name)
传递给bind .bind
的第一个参数是this
的值,而不是第一个参数(由于您使用.bind(this)
,因此应该知道它孔)。
您可以在MDN documentation中了解有关.bind
的更多信息。
答案 1 :(得分:0)
您还可以从事件处理程序返回一个函数:
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);
}
}
});