<div id="root"></div>
// Contextを生成する
const NumberContext = React.createContext();
// 2つの値を持つオブジェクトを返す
// { Provider, Consumer }
const App = () => {
// Providerを活用して値を全ての
// 子要素と孫要素に利用可能にする
return (
<NumberContext.Provider value={42}>
<div>
<Display />
</div>
</NumberContext.Provider>
);
}
const Display = () => {
// Consumerを活用してcontextから取得した値を使う
// このコンポーネントはpropsを取らないことに注意!
return (
<NumberContext.Consumer>
{value => <div>親コンポーネントから渡された値: {value}</div>}
</NumberContext.Consumer>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.