React コンポーネント間の通信方法の簡単な紹介

この記事は、React 開発チュートリアルの React コンポーネント通信の詳細な説明を主に紹介していますが、編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう

この2日間でReactを学習しましたが、コンポーネント通信に関する知識点が多く、非常に重要だと感じたので、今日はいくつかメモを追加します。

親子コンポーネント通信

通信手段

これは最も一般的な通信方法であり、親コンポーネントは子コンポーネントに必要な props を子コンポーネントに渡すだけです。そして、子コンポーネントは this.props を直接渡して使用します。

通信コンテンツ

さらに言及すべきことは、サブコンポーネントのプロパティを適切に設定する方法です。サブコンポーネントを再利用性の高いユニバーサルコンポーネントに設計したい場合は、再利用可能な部分を抽象化する必要があります。 , 抽象化された props には 2 つの形式があり、1 つは単純な変数であり、もう 1 つはある種の論理関数を処理するために抽象化されています。

Header コンポーネントを例に挙げます

//HeaderBar.jsx 子组件

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }
  

  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("返回上一页")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        <span>{this.props.title || &#39;滴滴&#39;}</span>
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class App extends Component {

 render() {
  return (
   <p className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </p>
  );
 }
}

子コンポーネント間の通信

親子コンポーネントの通信手段は、子コンポーネントの props を介して行われます。親コンポーネントの通信は、親コンポーネントが子コンポーネントを使用して行うもので、コールバック関数を使用して一時的に学習したメソッドが 2 つあります

。子コンポーネントは props を介して子コンポーネントに渡され、子コンポーネントは props メソッドを介して子コンポーネントのデータを親コンポーネントに渡します

Use ref

親コンポーネントは refs を介して子コンポーネントのプロパティを呼び出します

。クロスレベルのコンポーネント通信

React では、属性が繰り返し使用され、複数の子コンポーネントに存在する場合 このとき、レベルごとに props を渡すと、マルチレベルのアクセスを実現できますが、これにより、 React China では、コンテキストを使用してクロスレベルの親子コンポーネントの通信を行うこともできます。

React では、コンテキストはワームホールと呼ばれます

。同レベルコンポーネント通信

兄弟コンポーネント間の通信は、複数の親コンポーネントを使用して、親コンポーネントを仲介として経由する必要があります - サブコンポーネント通信、プロジェクトは転送する必要のあるデータを状態に置きます親コンポーネントの変更時に自動的に同期して転送できます。

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