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

1、封裝的公共文件

在組件外部建立一個Context

// createContext.js文件

import { createContext } from “react”;

const myContext = createContext(null);

export default myContext;

 

2、父組件

myContext.Provider提供了一個Context對象,這個對象是可以被子組件共享的。

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、子組件

useContext()鉤子函數用來引入Context對象,從中獲取count 屬性

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;

 

有人可能覺得用useState可以實現啊,為啥要用這個,這個的話其實是你的子組件寫到別的文件里也還是可以公用這個狀態的,也就是這個狀態對子組件的子組件的子組件也可以公用。

Tags: