React:如果每个单元格都是子组件,如何获取行索引?

我目前正在尝试创建一个表,其中需要为每行显示行索引。 我以为这是一个简单的任务,但是我很快意识到这是我所不知道的。

该表通过获取的JSON文件(this.state)进行迭代(映射)。 然后从this.state.body.map()通过React.createElement创建带有道具“ player”的组件

以下是表格组件

render() {
        return (
            <div>
                <table className="ranked_table">
                    <tbody>
                    {this.state.body.map(player => React.createElement(Cell, player))}
                    </tbody>
                </table>
                <button id="vote_btn"><a>RANK</a></button>
            </div>
        );
    }

下面是行组件

render() {
        return (
            <tr className="row">
                <th>{**DESIRED RANK COLUMN**}</th>
                <th>
                    <div className="image_border">
                        <img src={this.props.image} className="profile_pic" alt="" >
                        </img>
                        <div className="medal"></div>
                    </div></th>
                <th><div className="name">{this.props.name}</div></th>
                <th>
                    <a className="upVote">
                        <img src="/asset/vote_btn.svg"></img>
                    </a>
                </th>
                <th className="count">{this.props.count}</th>
            </tr>
        );
    }

如何创建行索引列?我试图修改作为道具传递给行组件的状态对象,但我也被卡在那里。

评论
  • lsint
    lsint 回复

    map function passes the current index to its callback function. You can pass that index to row component

    this.state.body.map((player, index) => React.createElement(Cell, [player, index]))