Javascript 如何在React组件中访问js和jsx中map函数之外的变量 var piecelest=React.createClass({ render:function（）{ 变量块； if（this.props.pieces&&this.props.onDeletePiece2）{ var pieces=this.props.pieces.map（函数（片段）{ 返回( ) }); } 返回( {件} ); } });

我被难倒了，不知道该如何让它发挥作用。问题是{this.props}在map函数中不可用

---

在这里坐火车会更好吗？难倒了，请停下来

编辑2:React 0.14.x

现在，您可以定义不需要复杂生命周期事件挂钩或内部状态的组件

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>
    );  
  }
});

这可能是编写组件tho的更好方法

this.props.pieces.map(..., this);

将输出

var x = {a: 1, b: 2};

['a', 'b'].map(function(key) {
  // `this` is set to `x`
  // `key` will be `'a'` for the first iteration
  // `key` will be `'b'` for the second iteration
  console.log(this[key]);
}, x); // notice we're passing `x` as the second argument to `map`

注意

map

的第二个参数如何设置函数的上下文。在函数内调用

this

时，它将等于发送到

映射的第二个变量

这是JavaScript的基础知识，您应该阅读更多的
map
只是一种常规的JavaScript方法（请参阅）。它可以接受一个设置上下文的参数（
.map（callback[，thisArg]）
）：

var piecelest=React.createClass({
render:function（）{
变量块；
if（this.props.pieces&&this.props.onDeletePiece2）{
var pieces=this.props.pieces.map（函数（片段）{
返回(
)
}，this）；//需要添加上下文
}
返回(
{件}
);  
}
});

我建议回去阅读JavaScript中的
这个
。当您将匿名函数传递给大多数方法（如
.map
、
.forEach
等）时，它会接受全局上下文（几乎总是
窗口
）。如果您传入
this
作为最后一个参数，因为该
this
引用的是您刚刚用
React.createClass
创建的类，它将设置正确的上下文

换句话说，您尝试的方式是访问
window.props
，这显然是不存在的。如果您打开控制台进行调试，您会看到错误
对象窗口没有属性“props”
或一些非常模糊的内容。
您使用的是像Babel这样的transpiler吗？如果是这样，此代码将正常工作：

if（this.props.pieces&&this.props.onDeletePiece2）{
var pieces=this.props.pieces.map（（piece，i）=>{
返回(
)
});
...


如果无法使用transpiler，可以执行以下操作：

if（this.props.pieces&&this.props.onDeletePiece2）{
var=这个；
var pieces=that.props.pieces.map（函数（piece，i）{
返回(
)
})

。。。
谢谢。嗯，我有点了解，但不是全部，你能详细说明一下吗？构造组件的有趣方式，谢谢分享。我仍然不知道如何在映射函数中使用this.props-但我需要深入了解javascript，因为它不是我的主要语言。我可以剪切/粘贴你的考试吗我想让我的代码发挥作用吗？谢谢你提供了一个经过深思熟虑的答案，包括链接，真的很感谢！非常感谢。我对JS和前端的东西比较新，但我会继续研究。谢谢！我得到了你不知道的JS：这个&对象原型，我已经完成了一半-真的需要它。这也是唯一可行的解决方案他从盒子里拿出来，非常简单。+1谢谢！
this.props.pieces.map(..., this);

var PieceList = React.createClass({

  renderPiece: function(piece) {
    return <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />;
  },

  render: function() {
    if (!this.props.onDeletePiece2) return;
    return (
      <div className="piecesTable">
        {this.props.pieces.map(this.renderPiece, this)}
      </div>
    );
  }
});

var x = {a: 1, b: 2};

['a', 'b'].map(function(key) {
  // `this` is set to `x`
  // `key` will be `'a'` for the first iteration
  // `key` will be `'b'` for the second iteration
  console.log(this[key]);
}, x); // notice we're passing `x` as the second argument to `map`

// "1"
// "2"

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>
    );  
  }
});

if (this.props.pieces && this.props.onDeletePiece2) {
  var pieces = this.props.pieces.map((piece, i) => {
    return (
      <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} key={i}/>
    )
  });
  ...

if (this.props.pieces && this.props.onDeletePiece2) {  
var that = this;
    var pieces = that.props.pieces.map( function(piece, i) {
    return (
      <Piece pieceData={piece} onDeletePiece3={that.props.onDeletePiece2} key={i}/>
    )
  })