ポータルスロットとも言えますが、Vueのスロットとは異なり、React要素を指定されたコンテナ(実際のDOM)にレンダリングすることを指します。 たとえば、Modal コンポーネントは通常、デフォルトで本体の実際の構造の子要素として直接レンダリングされるため、ReactDOM.createPortal(ReactElement, RealDOM container) を使用して React 要素を作成できます。コード例: 'react' から React をインポートします 'react-dom' から ReactDOM をインポートします。 './components/Modal' から Modal をインポートします。 const PortalModal = ReactDOM.createPortal(<Modal />, document.body) デフォルト関数App()をエクスポートする{ <div className="app-container"> を返します。 <ポータルモーダル /> </div> } ブラウザコンソールでは、実際のModalコンポーネントが実際にはbodyの直接の子要素としてレンダリングされていることがわかりますが、React開発者ツールを使用すると、Modalコンポーネントが仮想DOMツリー構造のAppコンポーネントの下にあり、クラス名がapp-containerのdivにあることがわかります。 したがって、React コンポーネントの仮想 DOM ツリー構造は、実際の DOM ツリー構造と一致していない可能性があると結論付けることができます。 したがって、イベントバブリングに注意を払う必要がある
エラー境界処理デフォルトでは、レンダリング中にコンポーネントにエラーが発生した場合、コンポーネント ツリー全体がアンマウントされます。エラー境界: レンダリング中に子コンポーネントで発生したエラーをキャプチャし、エラーが親コンポーネントに伝播するのを防ぐ機能を持つコンポーネント。 コンポーネントでエラーをキャッチする (クラス コンポーネント): サブコンポーネントがエラーをレンダリングしたときにトリガーされる静的メソッドstatic getDerivedStateFromErrorを使用します。
React をインポートし、{PureComponent} を 'react' からインポートします。 エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{ 状態 = { エラー: false } 静的 getDerivedStateFromError(エラー) { console.log('レンダリングエラー: ', error) 戻る { isError: 真 } } 与える() { エラーの場合 戻る <span>問題が発生しました...</span> } this.props.children を返す } } componentDidCatch(error, info)関数の使用
React をインポートし、{PureComponent} を 'react' からインポートします。 エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{ 状態 = { エラー: false } コンポーネントDidCatch(エラー、情報) { // info はエラーの概要です console.log('レンダリング エラー: ', error) console.log('レンダリング情報: ', info) this.setState({ isError: 真 }) } 与える() { エラーの場合 戻る <span>問題が発生しました...</span> } this.props.children を返す } } エラー境界を使用しない場合はどうなりますか?React 16 以降では、エラー境界でキャッチされないエラーが発生すると、React コンポーネント ツリー全体がアンマウントされます。 経験上、バグのある UI を残しておくよりも完全に削除する方がよいことがわかっています。たとえば、Messenger のような製品では、通常とは異なる UI をユーザーに提示すると、ユーザーが他のユーザーに間違ったメッセージを送信してしまう可能性があります。 エラー境界を追加すると、アプリケーションで例外が発生したときに、より優れたユーザー エクスペリエンスを提供できます。たとえば、Facebook Messenger では、サイドバー、メッセージ パネル、チャット履歴、メッセージ入力ボックスが別々のエラー境界で囲まれます。一部の UI コンポーネントがクラッシュしても、残りのコンポーネントは引き続きインタラクティブになります。 注記一部のエラーはエラー境界コンポーネントによって捕捉されません 独自のコンポーネントのエラー 非同期エラー(setTimeout でスローされたエラーなど) React をインポートし、{PureComponent} を 'react' からインポートします。 // エラー境界.jsx エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{ 状態 = { エラー: false } /* この関数は実行されません */ 静的 getDerivedStateFromError(エラー) { console.log('レンダリングエラー: ', error) 戻る { isError: 真 } } 与える() { エラーの場合 戻る <span>問題が発生しました...</span> } this.props.children を返す } } // Comp.jsx Compコンポーネントエクスポートデフォルト関数Comp() { タイムアウトを設定する(() => { 新しいエラーをスローします('setTimeout error') }, 1000) <div>Comp</div> を返す } // App.jsx はエクスポートデフォルト関数 App() を使用します { 戻る <> <エラー境界> <コンプ /> </エラー境界> </> } イベントで発生したエラー つまり、子コンポーネントのレンダリング中にのみ同期エラーを処理する React でのポータルとエラー境界処理の実装に関するこの記事はこれで終わりです。React ポータルとエラー境界処理の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker で hyperf を開発する完全な使用例の詳細な説明
>>: MySQL sql_modeの適切な設定に関する詳細な説明
参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...
今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...
目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...
Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...
Pure jsは、参照用にワンクリックで編集可能なテーブル(トランスクリプトに似たもの)を実装してい...
序文HTTP はステートレスな通信プロトコルです。各リクエストは互いに独立しており、サーバーは以前の...
イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...
これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...
この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...
<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...