⭐任務說明

😸 學習使用 useContext

useContext 是什麼

• 讓當前的元件可以取到其他元件的內容（context），可以達到共享資料，像是可以處理用戶驗證、主題
• 讓元件的結構可以較為簡潔，不需要將資料使用 props 層層傳遞

如何使用

• 先來看看他的基本用法

import { useContext } from 'react';

function MyComponent() {
 const theme = useContext(ThemeContext);
 // ...
 

練習看看

• 先建立一個用來放共享資料的容器

😸 這邊的命名方式通常會是以大寫開頭，用來識別他是一個 Context Object

const MyContext = React.createContext();

• 再來是建立一個提供者的元件，透過這個元件將需要共享的資料傳遞給子元件
• <xxx.Provider>是固定寫法，其中前面的 xxx 會是我們在最上面使用的 createContext()

function MyProvider(props) {

 const contextValue = 'hello';
 return (
   <MyContext.Provider value={contextValue}>
     {props.children}
   </MyContext.Provider>
 );
}

• 建立 Message 元件，將會使用 useContext，而 MyContext就是上面宣告的內容

function Message() {
 const contextValue = useContext(MyContext);
 return <div>{contextValue}</div>;
}

export default function App() {
 return (
   <MyProvider>
     <div className="App">
       <h1>DAY 14 React 大秘境</h1>
       <Message />
     </div>
   </MyProvider>
 );
}

• 來看看結果
  

• [完整程式碼](https://codesandbox.io/s/day14-c4x9dv?file=/src/App.js:261-546

結語

😸終於不用傳來傳去了好累啊，我們下個任務見！