useContext trong Reactjs (hooks)
phinv54 ✍︎︎ 05-10-2020
Rect context API là một cách cơ bản để tạo các biến toàn cục có thể được truyền qua trong ứng dụng React
Context gồm 2 phần là Provider ( cung cấp giá trị ) và Consumer ( sử dụng giá trị )
Tạo context
sử dụng createContext để tạo context và giá trị mặc định
import React from 'react'
export const UserContext = React.createContext({})Tiếp theo viết Provider và truyền dữ liệu xuống
export const UserProvider = ({children}) =>{
const [user, setUser] = useState({})
// lấy thông tin user từ api
useEffect(()=>{
fetch("https://randomuser.me/api")
.then(res=>res.json())
.then(data=>{
console.log(data);
setUser(data.results[0])
})
.catch(console.log)
},[])
return(
<UserContext.Provider value={user}>
{children}
</UserContext.Provider>
)
}sử dụng UserProvider trong file index.js
ReactDOM.render(
<UserProvider>
<App/>
</UserProvider>,
document.getElementById('root')
);trong các component con ta lấy giá trị value user bằng useContext ví dụ:
import React , {useContext} from 'react';
import './App.css';
import { UserContext} from "./context/userContext";
function App() {
const user = useContext(UserContext)
if(!user.id)
return <div>loading...</div>
return (
<div className="App">
<p>
Hi {user.name.title} {user.name.first} {user.name.last }
</p>
</div>
);
}
export default App;