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 に渡され、ビューレイヤーにバインドされます。

最初のステップは、 コンポーネント

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

をバインドし、親コンポーネントの を

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

; に変更します。 Show/> コンポーネントで、添付された onShow 属性をそのコンテンツにバインドします。 コンポーネントは

class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

になります。 このようにして、コンポーネント 2 の表示レイヤーのデータがバインドされました。次に、親レイヤーの状態のメッセージの内容を変更するだけです。バインドされた表示レイヤーを作成します 内容も一緒に変化します

入力レイヤーの状態(データ)を親コンポーネントにプロモートします 以下は書き換えられたコンポーネント1です

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

ここに問題がある可能性があります: onInp () と内容 いいえ、心配しないで読み続けてください

次に、親コンポーネントの入力層サブコンポーネント 1 を書き換えます

class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  //传进的text是其提升上来的状态,然后再更新父组件的状态
  fn(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    

      /*
       onInp就出现在这里,并绑定一个函数,
       并且有一个content将父组件的状态同步到子组件中
      */
      
     <Show onShow={this.state.message}/>
    
   );
  }
 }

完成したコードは次のようになります

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