Question

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

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

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

Answer 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传递给任何组件。

从父接收的数据中更改动态生成的子组件的props / state

1 个答案: