ホームページ >バックエンド開発 >PHPチュートリアル >React コンポーネント間の通信の例
この記事では主にReactコンポーネント間の通信のサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう
最近、react.js の UI フレームワークを学び始めたところですが、React ライブラリが私に与えてくれる最大の感触は、必要なときに UI レイヤーを完全に引き継ぐことができるということです。ビューを変更します 何かを使用するときは、this.state でその状態を変更するだけで済みます。データ層ビュー層内のものが操作されている限り、変化するのは今でも気に入っています。結局のところ、DOM の直接操作を取り除くことができます。結局のところ、ロジック層の js でさまざまな CSS を混ぜた string にする必要がありますが、これは私にとっては少し不快です (このタグはJSXにも混在していますが、ラベルとして考える必要はなく、ステートメントとして考えると慣れると思います)。
ここ数日間の焦点に戻り、反応コンポーネント間の状態転送について話します。
上記のコード:
1. 2 つの子コンポーネント child-1 と child-2 を定義します
//child-1 子组件-1为输入框 class Input extends React.Component{ constructor(...args){ super(...args); } render(){ return <input type="text"/> } } //child-2 子组-2为显示框 class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p></p> } }
2. 親コンポーネント Parent を定義し、2 つの子コンポーネントを親コンポーネントに挿入します。
class Parent extends React.Component{ constructor(...args){ super(...args); } render(){ return( <p> <Input}/> <Show/> </p> ); } }
分析: コンポーネント 2 をコンポーネント 1 と同期するには、コンポーネント 1 と 2 の両方が親コンポーネントの状態をバインドします。これは、両方のコンポーネントを制御下に置くことを意味します。データの方向は、コンポーネント 1 が自身のデータを親レイヤーにプロモートし、それを親レイヤーの状態に保存することです。親レイヤーのデータは、コンポーネント 2 の propsプロパティを介してコンポーネント 2 に渡され、ビューレイヤーにバインドされます。
最初のステップは、最初に 9304e6782376319895a69f5eee4dd6e2 コンポーネントをバインドすることです。 9304e6782376319895a69f5eee4dd6e2 コンポーネントに移動し、添付された onShow 属性をそのコンテンツにバインドします。 9304e6782376319895a69f5eee4dd6e2コンポーネントは//在父层中的constructor中定义状态为一个空的message,this.state = {message:''} class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }
<Show onShow={this.state.message}/>
class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p>{this.props.onShow}</p> }
class Input extends React.Component{ constructor(...args){ super(...args); } //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp() fn(ev){ this.props.onInp(ev.target.value); } render(){ //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数 return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/> } }
以上がReact コンポーネント間の通信の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。