Javascript 如何使用嵌套的array.map将线路板上的位置从线路板发送到React JS中的单元组件

我正在用二维数组表示的React JS制作一个游戏板。线路板组件使用array.map函数循环行，使用嵌套的array.map函数再次循环列，以呈现单元组件以形成表

我不知道如何将线路板/阵列上的位置发送到单元组件。我想在每个嵌套循环中使用行号和列号创建2元素数组，并将其作为道具发送到单元格

但是如何访问外部映射函数的索引

以下是我的电路板和电池组件：

var Board = React.createClass({
  //dungeon map available in this.props.board  

  render: function() {

    return (

      <table className="table">
        {
          this.props.board.map(function(item,index){
          //loop through every element of the board array
          //these are the rows

          var row = index;

            return (

              <tr>
                {

                  item.map(function(item,index){

                    var position = [row, index]
                    //this does not work for row
                   //row from outer map loop not accessible

                    return (

                      <Cell value={item} position ={position}/>

                    )

                  }.bind(this))


                }

              </tr>  


            )


          }.bind(this))

        } 
      </table>

    )

  }

});

var Cell = React.createClass({
//this.props.position available here

    return (

      <td>
        {this.props.item}
      </td>

    )

  }

});

var Board=React.createClass({
//此.props.board中提供地下城地图
render:function（）{
返回(
{
this.props.board.map（函数（项、索引）{
//循环通过电路板阵列的每个元素
//这是一排
var行=指数；
返回(
{
item.map（功能（项目、索引）{
变量位置=[行，索引]
//这不适用于世界其他地区
//外部映射循环中的行不可访问
返回(
)
}.绑定（本）
}
)
}.绑定（本）
} 
)
}
});
var Cell=React.createClass({
//此处提供此.props.position
返回(
{this.props.item}
)
}
});

您需要在绑定中传递它：

var Board = React.createClass({
//dungeon map available in this.props.board  

render: function() {

    return (

    <table className="table">
        {
        this.props.board.map(function(item,index){
        //loop through every element of the board array
        //these are the rows

        var row = index;

            return (

            <tr>
                {

                /** NOTICE rowIndex **/  
                item.map(function(rowIndex, item,index){

                    var position = [row, index]
                    //this does not work for row
                //row from outer map loop not accessible

                    return (

                    <Cell value={item} position ={rowIndex}/>

                    )

                /** NOTICE we pass the row's index to binding **/
                }.bind(this, index))


                }

            </tr>  


            )


        }.bind(this))

        } 
    </table>

    )

}

});

var Board=React.createClass({
//此.props.board中提供地下城地图
render:function（）{
返回(
{
this.props.board.map（函数（项、索引）{
//循环通过电路板阵列的每个元素
//这是一排
var行=指数；
返回(
{
/**通知行索引**/
映射（函数（行索引、项、索引）{
变量位置=[行，索引]
//这不适用于世界其他地区
//外部映射循环中的行不可访问
返回(
)
/**注意，我们将行的索引传递给binding**/
}.bind（这个，索引））
}
)
}.绑定（本）
} 
)
}
});

注：顺序很重要。请注意，行索引是第一个