Reactjs 从父组件接收的数据更改动态生成的子组件的属性/状态

其主要思想是，如果存在动态生成的组件，如何从父组件更改其道具/或状态。父组件如何知道要更新哪个子组件

我是否可以告诉父组件设置状态并将值传递给正确的子组件，而不是更改所有子组件，子组件都将是相似的（克隆，但每个克隆可以有不同的道具、状态）

这是我的基本代码，我只想改变1个跨度的状态，而不是两者都改变，我想把这个想法应用到组件上

class MainApp  extends React.Component {
 constructor(props){
 super(props)

this.ChangeText= this.ChangeText.bind(this)
 this.state={
   text: "hi"
 }
}

ChangeText(e){
this.setState ({
  text: "hellow"
  })
 }




 render() {
    return (
  <div>
      <button onClick={this.ChangeText}>Click </button>
      <span>{this.state.text}</span>
      <span>{this.state.text}</span>
  </div>
    );
  }
 }

class MainApp扩展了React.Component{
建造师（道具）{
超级（道具）
this.ChangeText=this.ChangeText.bind（this）
这个州={
文字：“嗨”
}
}
更改文本（e）{
这是我的国家({
文本：“hellow”
})
}
render（）{
返回(
点击
{this.state.text}
{this.state.text}
);
}
}

您必须以某种方式识别每个跨度，它可能基于索引（即text1、text2、text3等…），然后在该状态下分别管理每个跨度，您将获得如下结果：

this.setState({
  text1: "hello",
  text2: "how are",
  text3: "you doing?"
});

在渲染方法中：

render() {
  return (
    <div>
      <span>{this.state.text1}</span>
      <span>{this.state.text2}</span>
      <span>{this.state.text3}</span>
    </div>
  );
}

render（）{
返回(
{this.state.text1}
{this.state.text2}
{this.state.text3}
);
}

---

同样的行为也可用于组件，因为React将重新渲染并将更新的道具传递给使用您更新的状态部分的任何组件。

如果您只想影响单个跨距，则需要为跨距提供不同的状态。如果我不知道将有多少跨距？那我怎么才能给他们不同的状态呢？使用索引。循环遍历父级的动态数据，并使用数组索引将其分配给状态。