ポータルスロットとも言えますが、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の適切な設定に関する詳細な説明
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
MySQL DATE_ADD(date,INTERVAL expr type) 関数と ADDDA...
今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...
今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...
会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...
VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...
この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...
1. <body background=画像ファイル名 bgcolor=color text=...
序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...
序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
1. データベースを作成する 2. テーブルを作成する1. deptテーブルを作成する テーブル「d...
1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...
この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...
この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...