はじめに
前回はコンテキストを使用してデータを受け渡しする方法について説明しました。
今回は、コンテキストを使用して関数・データを受け渡しする方法について説明します。
前提条件
前提条件は以下の通りです。
- Windows11
- React がインストールされている
- react-create-app を使用してパッケージが作成されている
プログラム
早速、プログラムを作成していきます。
コンテキストを取り扱う部分は別ファイルとして作成します。
また、以前使用したプログラムを一部流用しています。
TestProvider.js
import React, { createContext, useContext } from 'react'
const TestContext = createContext();
export const useTestContext = () => useContext(TestContext);
export function TestProvider({children}) {
const alertProvider = () => {
alert("hello alert");
}
const logProvider = (msg) => {
console.log(msg)
}
return (
<TestContext.Provider value={{alertProvider, logProvider}}>
{children}
</TestContext.Provider>
);
}
App.js
import React from "react";
import { TestProvider } from "./TestProvider.js";
import App2 from "./App2";
export default function testCreateContext() {
return (
<>
<TestProvider>
<App2 />
</TestProvider>
</>
)
}App2.js
import React from "react";
import { useTestContext } from "./TestProvider";
function App() {
const {alertProvider} = useTestContext();
alertProvider();
const {logProvider} = useTestContext();
logProvider("this is log provider");
const data = [
{
name: "Baked Salmon",
ingredients: [
{ name: "Salmon", amount: 1, measurement: "l lb" },
{ name: "Pine Nuts", amount: 1, measurement: "cup" },
{ name: "Butter Lettuce", amount: 2, measurement: "cups" },
{ name: "Yellow Squash", amount: 1, measurement: "med" },
{ name: "Olive Oil", amount: 0.5, measurement: "cup" },
{ name: "Garlic", amount: 3, measurement: "cloves" },
],
steps: [
"Preheat the oven to 350 degrees.",
"Spread the olive oil around a glass baking dish.",
"Add the salmon, garlic, and pine nuts to the dish.",
"Bake for 15 minutes.",
"Add the yellow squash and put back in the oven for 30 mins.",
"Remove from oven and let cool for 15 minutes. Add the lettuce and serve.",
],
},
{
name: "Fish Tacos",
ingredients: [
{ name: "Whitefish", amount: 1, measurement: "l lb" },
{ name: "Cheese", amount: 1, measurement: "cup" },
{ name: "Iceberg Lettuce", amount: 2, measurement: "cups" },
{ name: "Tomatoes", amount: 2, measurement: "large" },
{ name: "Tortillas", amount: 3, measurement: "med" },
],
steps: [
"Cook the fish on the grill until hot.",
"Place the fish on the 3 tortillas.",
"Top them with lettuce, tomatoes, and cheese",
],
},
];
return (
<>
{data.map((d, i) => (
<section id={i}>
<h1>{d.name}</h1>
{d.steps.map((s, i)=>(
<li>{s}</li>
))}
</section>
))}
</>
)
}
export default App;
上記を作成して実行します。
アラートが表示された後に、コンソールに “this is log provider” と表示されていれば成功です。
プログラムの説明
TestProvider.js
import React, { createContext, useContext } from 'react'
const TestContext = createContext();
export const useTestContext = () => useContext(TestContext);コンテキストオブジェクトを作成し、useContext を関数としてラッピングします。
useTestContext を export することで外部から参照可能にします。
export function TestProvider({children})今までは export default function でしたが、今回は useTestContext も export する必要があるので、export function とします。
export default は一つのファイルに一つのみ export する場合に使用します。
<TestContext.Provider value={{alertProvider, logProvider}}>
{children}
</TestContext.Provider>こちらは前回説明した部分と同じで、コンテキストオブジェクトで囲む必要があります。
value には受け渡しする関数を指定します。
App.js
<TestProvider>
<App2 />
</TestProvider>TestProvider.js から TestProvider をインポートして App2 を囲みます。
App2.js
const {alertProvider} = useTestContext();
alertProvider();
const {logProvider} = useTestContext();
logProvider("this is log provider");TestProvider.js から useTestContext をインポートして上記のように使用します。
{logProvider} のようにすることで、該当する関数名・変数名を取り出すことができます。
おわりに
今回はページ間でデータ・関数を受け渡しする方法について説明しました。
これを使えばデータを一元管理が可能になります。
次回は useEffect の使い方について説明します。
コメント