元件不只能從父元件接收傳下來的props資料，React提供的Context API，利用Context 創建一個全域的資料設定檔，換句換說就是共同的State，讓不同層級的元件都可以使用從Context傳遞過來的資料，就不用靠傳遞好幾層的prop，就能方便得取得資訊。

建立Context

引入react的createContext

使用createContext建立你的共用資料庫

import { createContext } from 'react'

//輸出context資料讓元件使用
//在一開始可以先放你想預設的資料格式
export const ContextState = createContext(
{ titleContext: '', colorContext: '' }
);

也可以不預設

//不預設
export const ContextState = createContext();

或將預設格式設為其他型態

//預設格式為字串
export const ContextState = createContext('');

宣告Context

第一步：最上層元件宣告使用的context
假如我專案的最上層App元件，在App.js中把剛剛創好的context共用資料引入，

import { ContextState } from './context/ContextState'

Context在父層用context名稱配上Provider(提供)後的標籤包覆子元件
就能在這個標籤裡用value屬性，context.Provider 會把value屬性的值作為共用的資料傳入context，
這樣宣告成功後，根元件(最上層的元件)下面所有的子元件就能使用了。

import React from 'react';
import './App.css';
import { ContextState } from './context/ContextState.js'
import Child from './component/Child';

function App() {

  const setValue = {
    titleContext: "我在App元件將這段文字設成共用", colorContext: 'blue'
  }

  return (

    <div className="App">
      <ContextState.Provide value={setValue}>
        <Child />
      </ContextState.Provide>
    </div>)

}

export default App;