从父接收的数据中更改动态生成的子组件的道具/状态答案

【问题标题】：Changing the props/state of dynamically generated child component from the data the parent receives从父接收的数据中更改动态生成的子组件的道具/状态
【发布时间】：2017-02-06 08:58:18
【问题描述】：

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

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

这是我的基本代码，我只想更改 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>
    );
  }
 }

【问题讨论】：

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

标签： reactjs

【解决方案1】：

您必须以某种方式识别每个跨度，它可以基于一个索引（即 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>
  );
}

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

【讨论】：