如何在React中为两个相同的子组件分配不同的值

Question

例如

我有一个名为的父组件。该组件包含2个相同的组件，称为。到目前为止看起来像这样

<Overview>
  |<Stats>
  |<Stats>

统计组件包含如下所示的html。

Pic of Stats Component

现在第一次插入<Stats>时，我要分配与插入第二个分量时不同的值。因此，在屏幕截图中，每个部分下方都有数字。每次插入<Stats>组件时，这将是默认数字。每次插入<Stats>组件时，如何分配不同的编号。我不要相同的数字。

我想做的是在概览中创建状态，例如已提交，已兑换...等。然后在组件中检索这些状态，但为其自身分配新的值。我已经读过setState需要使用，但对于我的一生，我无法弄清楚。

任何帮助将不胜感激。

Answer 1

您可以将数字作为道具传递。只需为其提供一个名称，然后在您的开头JSX标签中为其分配名称，然后在该类中将其引用为this.props.yourPropName。 （如果您使用的是类）或props.yourPropName（如果组件是通过函数组成的））

function Stats(props){
//your code
}

<Stats yourPropOne=5 yourPropTwo=3/>