はじめに
前回は口コミ評価のアイコンを作成する方法について説明しました。
今回はページ間でデータを受け渡す方法について説明します。
前提条件
前提条件は以下の通りです。
- Windows11
- React がインストールされている
- react-create-app を使用してパッケージが作成されている
データの受け渡し方法について
データの受け渡し方法はいくつかあります。
- URL 末尾に id を付与する (useParams)
- SessionStorage を使用
- Context を使用
今回は Context を使用する方法について説明します。
簡単に使い方を説明すると、createContext でコンテキストを作成し、useContext でコンテキストからデータを取得します。
プログラムの作成
前回のプログラムを流用します。
App4.js
import React, { useState, useContext } from "react";
import { FaStar } from "react-icons/fa";
import { TestContext } from "./App";
const Star = ({selected=false, onSelect=f=>f}) => (
<FaStar color={selected ? "red" : "grey"} onClick={onSelect}/>
);
export default function StarRating({totalStars=5}) {
const [selectedStars, setSelectedStars] = useState(3);
const test_value = useContext(TestContext);
alert(test_value);
return (
<>
{[...Array(totalStars)].map((n,i)=>(
<Star
key={i}
selected={selectedStars > i}
onSelect={()=>setSelectedStars(i+1)}
/>
))}
<p>
{selectedStars} of {totalStars} stars
</p>
</>
)
}App.js
import React, {createContext} from "react";
import App4 from "./App4"
export const TestContext = createContext()
const msg = "test value";
export default function testCreateContext() {
return (
<>
<TestContext.Provider value={msg} >
<App4 />
</TestContext.Provider>
</>
)
}上記を実行すると、以下のようなアラートが表示されます。
データの受け渡しは成功です！
プログラムの説明
まずは、データの取得方法です。
const test_value = useContext(TestContext);
alert(test_value);これだけでデータの取得が可能になります。
次に、データを送る方法について説明します。
export const TestContext = createContext()
const msg = "test value";createContext でコンテキストオブジェクトを作成します。
<TestContext.Provider value={msg} >
<App4 />
</TestContext.Provider>TestContext で囲まれた中で useContext を使用してデータの受け渡しを行うことができます。
受け渡すデータは msg です。
セッションストレージを使用する場合
セッションストレージの使用方法は以下の通りです。
// データをセット
sessionStorage.setItem("data", "hello");
// データを取得
sessionStorage.getItem("data");おわりに
今回はページ間でデータを受け渡す方法について説明しました。
これを使えば、セッションストレージや URL に id を付加しなくてもデータを受け渡すことができます。
次回は、コンテキストで関数を受け渡す方法について説明します。
コメント