javascript - React.js 如何将索引作为 prop 从 this.props 数组传递给子组件

Question

React 新手，如果我的术语偏离目标，请提前致歉。我有一个表，其中包含按特定顺序排列的人员列表。我需要能够根据相关人员的索引创建一个 this.props.tablePosition 值。

this.props 是 Table 组件中的一个数组。我的下面的代码不起作用，因为我不确定如何获取索引。

<RankingCards {...this.props} tablePosition={this.props.indexOf(this)} />

Answer 1

需要查看其余代码，但根据我的理解，您需要这种流程，但如果我错了请纠正我；)

---

如果你在父组件中得到这样的 Prop

{
    tableData: [
        {name: "John", index: 1},
        {name: "David", index: 2},
        {name: "Ardhya", index: 3}
    ]
}

您可以像这样向各个子组件提供所需的数据。

this.props.tableData.map(function(data){
    // do whatever processing you want to perform
    return(
        <RankingCards rawProp={data} tablePosition={data.index} key={data.index} />
    )
})

在您的 RankingCards 组件中，您将获得 key 以外的 Prop 。

例如。对于第一个实体，如果您使用 console.log(this.props) 打印 Prop ，您将以这种方式获得值。

{
    rawProp: {name: "John", index: 1},
    tablePosition: 1
}