React で ReactDOM.createPortal() を使用する
-
React で
ReactDOM.createPortal()を使用して数値生成アプリを作成する -
React で
ReactDOM.createPortal()を使用して CSS オーバーレイ効果を作成する - まとめ
React とは、クリーンでわかりやすいコードを書くための最善の方法を考案することです。 React の createPortal() 関数はそのような方法の 1つです。
ReactDOM.createPortal() 関数は、長いコード行をセクションに分割する便利な方法です。 子コンポーネントを親コンポーネントから分離して各コンポーネントを簡潔にする場合、createPortal() 関数は有効性を失うことなく両方のコンポーネントを接続します。
また、親コンポーネントの前に子コンポーネントのコンテンツをレンダリングする場合は、ReactDOM.createPortal() を使用できます。 とはいえ、単純なアプリを作成してこの機能を使用する方法を見てみましょう。
React で ReactDOM.createPortal() を使用して数値生成アプリを作成する
この例では、子コンポーネントから親コンポーネントの状態を制御する方法を確認しますが、子コンポーネントは onClick イベント ハンドラーを使用して直接 div 内にあるわけではありません。
新しいプロジェクト フォルダーを作成し、パブリック フォルダーに移動し、index.html ファイルにアクセスして、子コンポーネントがレンダリングされる DOM として機能する div を作成します。 したがって、index.html は次のようになります。
コード スニペット - indx.html:
<div id="app-container"></div>
<div id="modal-container"></div>
次に、実際のコーディングを行うために index.js ファイルに進みます。 ここでは、react-dom から createPortal() 関数をインポートします。
コード スニペット - index.js:
import React from 'react';
import ReactDOM, { render, createPortal } from 'react-dom';
const appContainer = document.getElementById('app-container');
const modalContainer = document.getElementById('modal-container');
class Parent extends React.Component {
state = {clicks: 0};
onClick = () => {
this.setState(state => ({clicks: state.clicks + 1}));
};
render() {
return (
<div onClick={this.onClick}>
<p>Number of clicks: {this.state.clicks}</p>
{ReactDOM.createPortal(<Child />, modalContainer)}
</div>
);
}
}
function Child() {
return <button>Click</button>;
}
ReactDOM.render(<Parent />, appContainer);
出力：
Click ボタンは、ボタンがクリックされたときに実行されるアクションを定義するコンポーネント内にはありませんが、ボタンが親コンポーネントを更新していることがわかります。
React で ReactDOM.createPortal() を使用して CSS オーバーレイ効果を作成する
createPortal() 関数を使用すると、ボタンのアクションを定義する機能コンポーネント内にスタイリングが含まれていない場合でも、ボタンがクリックされると Web ページをカバーする .js ファイルにスタイリング コンポーネントを作成できます。 .
src フォルダー内に新しいファイルを作成し、overlayStyles.js という名前を付けます。 これには、ボタンがクリックされたときに Web ページ上にレンダリングされるオーバーレイ CSS スタイルが含まれます。
次に、index.js ファイルに移動して、次のコードを挿入します。
コード スニペット - index.js:
import React from "react";
import ReactDOM, { render } from "react-dom";
import { overlay, overlayContent } from "./overlayStyles";
class Overlay extends React.Component {
constructor(props) {
super(props);
this.overlayContainer = document.createElement("div");
document.body.appendChild(this.overlayContainer);
}
componentWillUnmount() {
document.body.removeChild(this.overlayContainer);
}
render() {
return ReactDOM.createPortal(
<div style={overlay}>
<div style={overlayContent}>{this.props.children}</div>
</div>,
this.overlayContainer
);
}
}
class App extends React.Component {
state = {
showOverlay: false
};
toggleOverlay = () => {
this.setState(prevState => {
return { showOverlay: !prevState.showOverlay };
});
};
render() {
return (
<div>
<h1>Dashboard</h1>
{this.state.showOverlay && (
<Overlay>
<div>
Overlay Content{" "}
<button onClick={this.toggleOverlay}>Close</button>
</div>
</Overlay>
)}
<button onClick={this.toggleOverlay}>Open Overlay</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
次に、overlayStyles.js ファイルに、次のような CSS コードを追加します。
コード スニペット - overlayStyles.js:
export const overlay = {
height: "100%",
width: "100%",
position: "fixed",
StayInPlaceZIndex: "1",
SitOnTopLeft: "0",
top: "0",
backgroundColor: "rgb(0,0,0)",
BlackFallbackColorBackgroundColor: "rgba(0,0,0, 0.9)",
BlackWOpacityOverflowX: "hidden",
DisableHorizontalScrollTransition: "0.5s"
};
export const overlayContent = {
position: "relative",
top: "25%",
width: "100%",
textAlign: "center",
marginTop: "30px",
color: "white"
};
出力：
Open Overlay ボタンをクリックすると、onClick イベントを処理するコンポーネント内にない場合でも、スタイリングがアクティブになることがわかります。
まとめ
ReactDOM.createPortal() 関数を使用すると、コーダーは、カーソルを合わせたときに項目をプレビューしたい場合など、アプリケーション内の特定の機能に使用するコンポーネントを簡単に分離できます。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn