var PieceList = React.createClass({
render: function() {
var pieces;
if (this.props.pieces && this.props.onDeletePiece2) {
var pieces = this.props.pieces.map(function (piece) {
return (
<Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />
)
});
}
return (
<div className="piecesTable">
{pieces}
</div>
);
}
});
我很难过如何让它发挥作用.问题是{this.props}在map函数内部不可用.
这里的foreach会更好吗？难倒,请停下来！
解决方法
map只是一种常规的JavaScript方法(见
Array.prototype.map).它可以采用一个设置上下文的参数(.map(callback [,thisArg]))：
var PieceList = React.createClass({
render: function() {
var pieces;
if (this.props.pieces && this.props.onDeletePiece2) {
var pieces = this.props.pieces.map(function (piece) {
return (
<Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />
)
},this); // need to add the context
}
return (
<div className="piecesTable">
{pieces}
</div>
);
}
});
我建议回去读一下JavaScript中的内容.当您将匿名函数传递给大多数方法(如.map,.forEach等)时,它会采用全局上下文(几乎总是窗口).如果你传入这个作为最后一个参数,因为这是指你刚刚用React.createClass创建的类,它将设置正确的上下文.
换句话说,你试图这样做的方法是访问window.props,它显然不存在.如果你打开你的控制台进行调试,你会看到错误对象窗口没有属性“props”或者非常混淆的东西.
