Question

React的新手，如果我的术语超出目标，请提前道歉。我有一张桌子，上面有按特定顺序列出的人。我需要能够根据有关人员的索引创建一个this.props.tablePosition值。

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

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

Answer 1

需要查看其余代码，但据我了解，您需要这种流程，但是如果我错了，请纠正我;）

如果要获得这样的道具，请在父组件中

{
    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组件内部，您将获得钥匙以外的道具。

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

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

Answer 2

this.props将引用Table组件的属性-但是，如果您要向数组中传递Table组件，例如。 <Table personList={["John","Jeff","Joe"]} />，那么您可以在表格的渲染函数中使用for循环：

    render() {
      var rankingCards = []
      var personList = this.props.personList
      for (var i = 0; i < personList.length; i++) {
        rankingCards.push(<RankingCard {...personList[i].props} tablePosition={i} />)
      }
      return(
        <RankingCardContainer>
          {rankingCards}
        </RankingCardContainer>
      )
    }

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

2 个答案: