CLASSFUNC BLOG
We Share Our Knowledge
useContext trong Reactjs (hooks)
A Phi
5 Th10 2020 09:27

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;

xem thêm :