私は2つの解決策を考え出しましたが、どちらも正しくないと感じています。
最初の解決策：
state.inputます。onChangePで関数を作成しますstate.input。これは、イベントを受け取り、を設定します。onChangeをとしてC1に渡し、C1 をFooのにpropsバインドthis.props.onChangeしonChangeます。これは機能します。Fooの値が変化するたびに、setStatePでa がトリガーされるため、PにはC2に渡す入力があります。
しかし、それは同じ理由でまったく適切とは言えません。私は、子要素から親要素の状態を設定しています。これは、Reactの設計原則、つまり単一方向のデータフローを裏切るようです。
これは私がそうすることになっている方法ですか、それとももっとリアクトナチュラルな解決策がありますか？
2番目の解決策：
FooをPに入れるだけです。
しかし、これは、アプリを構造化するときに従うべき設計原則renderです。つまり、すべてのフォーム要素を最上位クラスのに配置しますか？
私の例のように、C1のレンダリングが大きい場合render、C1にrenderフォーム要素があるため、C1 全体をP に配置したくありません。
どうすればよいですか？
だから、私があなたを正しく理解しているなら、あなたの最初の解決策はルートコンポーネントの状態を維持していることを示唆していますか？私はReactの作成者のために話すことはできませんが、一般的に、これは適切な解決策であると思います。
状態を維持することは、Reactが作成された理由の少なくとも1つです（少なくとも私はそう思います）。相互に依存する可動部分が多い動的UIを処理するために独自の状態パターンのクライアント側を実装したことがある場合は、この状態管理の苦痛の多くを軽減するので、Reactが気に入るはずです。
状態を階層の上位に維持し、イベントによって更新することにより、データフローはほぼ単方向であり、ルートコンポーネントのイベントに応答するだけであり、双方向のバインディングを介して実際にデータを取得していません。ルートコンポーネントに「ここで何かが発生しました。値を確認してください」と伝えるか、状態を更新するために子コンポーネントの一部のデータの状態を渡します。C1で状態を変更し、C2にそれを認識させたいので、ルートコンポーネントの状態を更新して再レンダリングすることにより、ルートコンポーネントで状態が更新されて渡されたため、C2のプロップが同期されます。 。
class Example extends React.Component {
constructor (props) {
super(props)
this.state = { data: 'test' }
}
render () {
return (
<div>
<C1 onUpdate={this.onUpdate.bind(this)}/>
<C2 data={this.state.data}/>
</div>
)
}
onUpdate (data) { this.setState({ data }) }
}
class C1 extends React.Component {
render () {
return (
<div>
<input type='text' ref='myInput'/>
<input type='button' onClick={this.update.bind(this)} value='Update C2'/>
</div>
)
}
update () {
this.props.onUpdate(this.refs.myInput.getDOMNode().value)
}
})
class C2 extends React.Component {
render () {
return <div>{this.props.data}</div>
}
})
ReactDOM.renderComponent(<Example/>, document.body)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加