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

廢話不多說，直接上代碼。

代碼如下：

1、封裝一個公共檔案createContext.js

在src/utils檔案夾下建立一個createContext.js檔案，代碼如下：

// createContext.js檔案

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

2、在父元件中使用

import React, { useState} from "react";
import Count from './count'
import myContext from '@/utils/createContext'

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

  return (
    <div>
      <h3>Father</h3>
      <p>You clicked {count} times</p>
      <button onClick={() => { setCount(count + 1) }}>
        click me
      </button>
      <myContext.Provider value={count}>
        <Count />
      </myContext.Provider>
    </div>
  );
}
export default App;

           

3、建立子元件count.tsx：

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

function Count() {
    const count = useContext(myContext);  // 得到父元件傳的值
    return (
        <div>
            <h3>我是子元件</h3>
            <p>這是父元件傳過來的值：{count}</p>
        </div>
    )
}

export default Count;
           

效果如下圖：