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>
    );
   }
  }

現在のタスクは、コンポーネント 1 にテキストを入力し、それを同時にコンポーネント 2 に表示することです。

分析: コンポーネント 2 をコンポーネント 1 と同期するには、コンポーネント 1 と 2 の両方が親コンポーネントの状態をバインドします。これは、両方のコンポーネントを制御下に置くことを意味します。データの方向は、コンポーネント 1 が自身のデータを親レイヤーにプロモートし、それを親レイヤーの状態に保存することです。親レイヤーのデータは、コンポーネント 2 の propsプロパティを介してコンポーネント 2 に渡され、ビューレイヤーにバインドされます。

最初のステップは、最初に コンポーネントをバインドすることです。 コンポーネントに移動し、添付された onShow 属性をそのコンテンツにバインドします。 コンポーネントは

//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   }

このようにして、コンポーネント 2 の表示層のデータがバインドされました。次に、メッセージの内容を変更するだけです。親レイヤーの状態を変更してバインディングを行う 表示レイヤーの内容もそれに合わせて変化します

入力レイヤーのステータス(データ)を親コンポーネントにプロモートする 以下は書き換えたコンポーネント1です

<Show onShow={this.state.message}/>

。この :onInp() が表示され、コンテンツが存在しない場合は、問題がある可能性があります。心配しないでください。

を見て、親コンポーネントの入力層のサブコンポーネント 1 を書き換えてください

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}/>
  }
 }

以上がこの記事の全内容です、皆様の学習に少しでもお役に立てれば幸いです、そして皆さんもScript Homeを応援していただければ幸いです。 。

以上がReact コンポーネント間の通信の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。