ホームページ > 記事 > ウェブフロントエンド > 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 || '滴滴'}</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 サイトの他の関連記事を参照してください。