React Hooks中使用useContext 進行父組件向子組件傳值

關於React Hooks中使用useContext 進行父子組件傳值（父子組件不在同一個文件中）

1、封裝的公共文件

// createContext.js文件

import { createContext } from "react";
const myContext = createContext(null);
export default myContext;

2、父組件

import React, { useState} from "react";
import Counter from './Counter'
import myContext from './createContext'

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h4>我是父組件</h4>
      <p>點擊了 {count} 次!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        點我
      </button>

      {/* 關鍵代碼 */}
      {/* 提供器 */}
      <myContext.Provider value={count}>
        <Counter />
      </myContext.Provider>
    </div>
  );
}
export default App;

3、子組件

import React, { useContext} from 'react';
import myContext from './createContext'

// 關鍵代碼
function Counter() {
    const count = useContext(myContext);  // 得到父組件傳的值
    return (
        <div>
            <h4>我是子組件</h4>
            <p>這是父組件傳過來的值：{count}</p>
        </div>
    )
}

export default Counter;