Day23 React 共享的State(一) Context

元件不只能从父元件接收传下来的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;