親コンポーネントは子コンポーネントと通信します
親グループ内のref参照を定義する 'react' から React,{Component,createRef} をインポートします。 './Child1' から Child1 をインポートします デフォルトクラスAppをエクスポートし、Componentを拡張します。 コンストラクタ(props){ スーパー(小道具) this.child = createRef() } 与える(){ 戻る( <div> <Child1 ref={this.child}/> <ボタンのonClick={this.fn.bind(this)}></ボタン> </div> ) } 関数(){ const 子 = this.child.current 子.setTitle() } } サブコンポーネントはデータソースとデータソースの変更方法を定義します React をインポートします。{Component} を 'react' からインポートします。 エクスポートデフォルトクラスChild1はComponentを拡張します{ 状態={ title:'タイトル' } 与える(){ 戻る ( <div> {この州のタイトル} </div> ) } タイトルを設定する(){ this.setstate({title:'hh'}) } } 子コンポーネントは親コンポーネントと通信します親コンポーネントは、独自のメソッドの 1 つを子コンポーネントに渡します。メソッドでは、状態の変更など、何でも実行できます。子コンポーネントは、 コンポーネント間の通信React には、この問題を解決するための Vue のようなイベント バスがありません。 1 つの方法は、共通の親コンポーネントを使用してプロキシ経由で実装することですが、プロセスは非常に面倒になります。 React は、コンポーネント ツリーの各レイヤーにプロパティを明示的に渡すことなく、コンポーネント間の通信を実現するための Context を提供します。
先祖と子孫
React をインポートし、 'react' から {createContext} を作成します。 {プロバイダー、コンシューマー} = createContext() を作成します。 輸出 { プロバイダー、//パブリッシュ コンシューマー //サブスクライブ} 2. 祖先ノード 'react' から React 、{Component} をインポートします。 './store' から {Provider,Consumer} をインポートします。 './Son' から Son をインポートします デフォルトクラスAppをエクスポートし、Componentを拡張します。 コンストラクタ(props){ スーパー(小道具) this.state={ 名前:'mingcen' } } 与える(){ 戻る ( <div> <プロバイダー値={this.state.name}> <息子/> </プロバイダー> </div> ) } } 3. 子孫ノード React をインポートします。{Component} から 'react' './store' から {Consumer} をインポートします。 エクスポートデフォルトクラスSon1はComponentを拡張します{ コンストラクタ(props){ スーパー(小道具) this.state={ 名前:'ううう' } } 与える(){ 戻る( <div> <消費者> { 値=>{ <div>{値.名前}</div> } } </消費者> </div> ) } } ブラザーノード通信
祖先 状態={ カウント:1, setCount:()=>{ this.setState(state=>{ 戻る { カウント:++状態.カウント } }) } } 与える(){ {count,setCount} = this.state とします。 戻る( <div> <プロバイダー値={{count,setCount}}> <Cmp1></Cmp1> <Cmp2></Cmp2> </プロバイダー> </div> ) } ブラザーCmp2 React をインポートし、{ Component 、 createContext } を 'react' から取得します。 エクスポートデフォルトクラスCmp2はComponentを拡張します{ // デフォルトデータのみ取得 --> プロバイダーコンポーネントにラップされていません static contextType = createContext 与える() { 戻る ( <div> <button onClick={this.setCount.bind(this)}>データの自動増加</button> </div> ) } setCount() { this.context.setCount() } } ブラザーCmp1 <消費者> { 値 => <h3>{value.count}</h3> } </消費者> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: マークアップ言語 - テキストの CSS スタイルを指定する
>>: Xmeter APIインターフェーステストツールの使用状況の分析
目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...
目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...
httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...
私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...
目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...
目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...
v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...
1. 文書化ルール1. 大文字と小文字が区別されます。 2. 属性値は引用符(一重引用符または二重引...
explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方法で...
目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...
この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...
1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...