React.jsで子コンポーネントから親コンポーネントへpropsを渡す方法
React.jsで親コンポーネントにpropsを渡す方法
子コンポーネントから親コンポーネントへpropsを渡すには、以下の2つの方法があります。
propsオブジェクトを渡す
子コンポーネント内で、propsオブジェクトに渡したいデータをプロパティとして追加します。
// 子コンポーネント
const ChildComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
const handleChildCountChange = (newCount) => {
setCount(newCount);
};
return (
<div>
<ChildComponent onCountChange={handleChildCountChange} />
<p>親コンポーネントのカウント: {count}</p>
</div>
);
};
上記のコードでは、ChildComponent内でprops.onCountChangeというプロパティにhandleChildCountChange関数を渡しています。ParentComponentでは、ChildComponentから渡されたonCountChange関数をcountの更新に使用しています。
カスタムイベントを使う
子コンポーネント内でカスタムイベントを作成し、イベントオブジェクトにデータを付与して親コンポーネントへ送信することができます。
// 子コンポーネント
const ChildComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
// カスタムイベントを作成して送信
const event = new CustomEvent('count-changed', {
detail: {
count: count,
},
});
dispatchEvent(event);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// 親コンポーネント内でイベントリスナーを追加
window.addEventListener('count-changed', (event) => {
const newCount = event.detail.count;
setCount(newCount);
});
}, []);
return (
<div>
<ChildComponent />
<p>親コンポーネントのカウント: {count}</p>
</div>
);
};
上記のコードでは、ChildComponent内でcount-changedというカスタムイベントを作成し、イベントオブジェクトにcountの値を付与して送信しています。ParentComponentでは、addEventListenerを使用してcount-changedイベントをリスニングし、イベントが発生した際にcountを更新しています。
React.jsで子コンポーネントから親コンポーネントへpropsを渡すには、propsオブジェクトを渡す方法とカスタムイベントを使う方法があります。どちらの方法も一長一短があり、状況に応じて使い分けることが重要です。
// 子コンポーネント
const ChildComponent = ({ onCountChange }) => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
onCountChange(count);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
const handleChildCountChange = (newCount) => {
setCount(newCount);
};
return (
<div>
<ChildComponent onCountChange={handleChildCountChange} />
<p>親コンポーネントのカウント: {count}</p>
</div>
);
};
// 子コンポーネント
const ChildComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
// カスタムイベントを作成して送信
const event = new CustomEvent('count-changed', {
detail: {
count: count,
},
});
dispatchEvent(event);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// 親コンポーネント内でイベントリスナーを追加
window.addEventListener('count-changed', (event) => {
const newCount = event.detail.count;
setCount(newCount);
});
}, []);
return (
<div>
<ChildComponent />
<p>親コンポーネントのカウント: {count}</p>
</div>
);
};
上記のコードを参考に、状況に応じてpropsを渡す方法を選択してください。
子コンポーネントから親コンポーネントへpropsを渡す他の方法
Context APIは、コンポーネントツリー全体でデータを共有するための便利なAPIです。子コンポーネントから親コンポーネントへpropsを渡す場合にも使用できます。
// Contextを作成
const MyContext = createContext(null);
// Providerコンポーネントを作成
const MyProvider = ({ children }) => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
{children}
</MyContext.Provider>
);
};
// 子コンポーネント
const ChildComponent = () => {
const { count, setCount } = useContext(MyContext);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
return (
<MyProvider>
<ChildComponent />
</MyProvider>
);
};
上記のコードでは、MyContextというContextを作成し、countとsetCountという2つのプロパティを定義しています。MyProviderコンポーネントは、MyContextのProviderコンポーネントであり、countとsetCountを子コンポーネントに渡します。ChildComponentは、useContextフックを使用して、MyContextからcountとsetCountを取得します。
Render propsは、コンポーネントのレンダリングロジックを別のコンポーネントに委譲するためのパターンです。子コンポーネントから親コンポーネントへpropsを渡す場合にも使用できます。
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
const renderChild = ({ count, onCountChange }) => {
return (
<div>
<button onClick={onCountChange}>カウントアップ</button>
<p>現在のカウント: {count}</p>
</div>
);
};
return (
<div>
{renderChild({ count, onCountChange: setCount })}
</div>
);
};
上記のコードでは、renderChildという関数を作成し、countとonCountChangeという2つのプロパティを受け渡しています。ParentComponentは、renderChild関数を呼び出し、countとsetCountを渡しています。renderChild関数は、渡されたpropsを使用して子コンポーネントをレンダリングします。
状態管理ライブラリ
Reduxなどの状態管理ライブラリを使用している場合は、ライブラリが提供する機能を使用して子コンポーネントから親コンポーネントへpropsを渡すことができます。
Reduxの場合
// 子コンポーネント
const ChildComponent = () => {
const dispatch = useDispatch();
const handleClick = () => {
dispatch({ type: 'INCREMENT_COUNT' });
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
const store = useSelector(store => store.count);
return (
<div>
<ChildComponent />
<p>現在のカウント: {count}</p>
</div>
);
};
上記のコードでは、Reduxを使用してcountという状態を管理しています。ChildComponentは、dispatchフックを使用してINCREMENT_COUNTというアクションをディスパッチします。ParentComponentは、useSelectorフックを使用してcount
javascript reactjs
