Context APIを使用したグローバル値の管理
- value : Root -> A -> B -> F
-HandleSetValue:Root->A->B->E->G
例
ContextSample.js
import React, { createContext, useContext } from "react";
function Child({ text }) {
return <div>안녕하세요? {text}</div>;
}
function Parent({ text }) {
return <Child text={text} />;
}
function GrandParent({ text }) {
return <Parent text={text} />;
}
function ContextSample() {
return <GrandParent text="Good" />;
}
export default ContextSample;
*Contextの適用import React, { createContext, useContext } from "react";
// context에서 사용할 기본값 설정
const MyContext = createContext("defaultValue");
function Child() {
const text = useContext(MyContext);
return <div>안녕하세요? {text}</div>;
}
function Parent() {
return <Child />;
}
function GrandParent() {
return <Parent />;
}
function ContextSample() {
return (
<MyContext.Provider value="Good">
<GrandParent />
</MyContext.Provider>
);
}
export default ContextSample;
実習
-解決策1.contextでonToggleとonRemoveを直接入れます.
リファレンス
https://velopert.com/3606
Reference
この問題について(Context APIを使用したグローバル値の管理), 我々は、より多くの情報をここで見つけました https://velog.io/@green9930/Context-API를-사용해서-전역-값-관리하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol