TIL.React Hooks_useContext
8243 ワード
Contextとは?
コンテキストは、propsをすべてのレベルで手動で渡す必要がなく、コンポーネントツリーを介してデータを転送する方法を提供します.
import React from 'react'
import ComponentC from './components/ComponentC'
export const UserContext =React.createContext()
export const ChannelContext=React.creatContext()
function App(){
return(
<div className="App">
<UserContext.Provider value={'chloe'}>
<ChannelContext.Provider value={'code'}>
<ComponentC/>
</ChannelContext.Provider>
</UserContext.Provider>
</div>
)
}
export default App
import React from 'react'
import {UserContext,ChannelContext} from '../App'
function ComponentF(){
return(
<div>
<UserContext.Consumer>
{
user=>{
return (
<ChannelContext.Consumer>
{
channel=>{
return <div> User context value {user},channel context value {channel}
</div>
)
user에 app component에서 username으로 정한 chloe가 찍힌다!
}}
</ChannelContext.Consumer>
)
}}
</UserContext.Consumer>
</div>
)
}
export default ComponentF
import React, {useContext} from 'react'
import ComponentF from './ComponentF'
import {UserContext, ChannelContext} from '../App'
function ComponentE(){
const user =useContext(UserContext)
const channel = useContext(ChannelContext)
return (
<div>
{user} -{channel}
</div>
)
}
export default ComponentE
Reference
この問題について(TIL.React Hooks_useContext), 我々は、より多くの情報をここで見つけました https://velog.io/@chloeee/TIL.React-HooksuseContextテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol