การใช้งาน Context ใน React

 React อนุญาตให้เราใช้งาน Context เพื่อส่งผ่านข้อมูลไปยัง Component ลูก(ทุก component) โดยไม่ต้องใช้ Props ตัวอย่าง เช่น

import ReactDOM from 'react-dom'

import React, {createContext} from 'react';

const AgeContext = createContext('');

export function App() {

return (

<div className='App'>

<AgeContext.Provider value='18'>

<Body/>

</AgeContext.Provider>

</div>

);

}

function Body() {

return <Greeting/>;

}

function Greeting() {

return (

<AgeContext.Consumer>

{age => <h1>My age is {age}</h1>}

</AgeContext.Consumer>

);

}

ReactDOM.render(

<App />,

document.getElementById('container')

);

เราสามารถสร้าง Context พร้อมทั้งกำหนดค่าเริ่มต้โดยใช้คำสั่ง createContext(<<initial value>>)

หรืออาจ assign ค่าใหม่โดยใช้ Provider จากนั้นสามารถใช้ Consumer ใน Component เมื่อต้องการใช้งานค่าที่กำหนดไว้