javascript – 如何在React组件中的js和jsx中访问map函数之外的vairables

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”或者非常混淆的东西.

javascript – 如何在React组件中的js和jsx中访问map函数之外的vairables

解决方法

猜你在找的JavaScript相关文章