親が受け取るデータから動的に生成された子コンポーネントの小道具/状態を変更する

Question

主な考え方は、動的に生成されたコンポーネントがある場合、その親コン​​ポーネントからどのように小道具/ステートを変更できるかということです。親が更新する子コンポーネントをどのように知ることができるか。

私はどういうわけか、状態を設定して正しい子コンポーネントに値を渡す代わりに、すべての子コンポーネントを変更することができます。子コンポーネントはすべて同じです（クローンはそれぞれ異なる小道具、状態）

これは私の基本的なコードであり、私はその2つではなく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

あなたはそれがインデックス（すなわち。テキスト1、テキスト2、テキスト3、など...）に基づくことができる、何とか各スパンを特定する必要があります、その後の状態でそれぞれを個別に管理し、使用して、任意のコンポーネントに

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

反応する同じ動作は、部品に使用することができ、再レンダリングして渡します更新小道具：

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

そして、あなたのrenderメソッドで：あなたのようなものを持っています州の一部あなたはそれを更新します。