react useContext 用法
1 创建createContext
import React, { useContext, useEffect, useState } from 'react'
const GlobalContext = React.createContext()
2 GlobalContext 作为提供者
export default function App(){
const [filmList,setfilmList] = useState([]);
const [info,setinfo] = useState('');
useEffect(()=>{
return()=>{
axios.get(`/maizuo.json`).then(res=>{
setfilmList(res.data)
})
}
},[])
return (
//GlobalContext 作为提供者
<GlobalContext.Provider value={{
call:'打电话',
sms:'短信服务',
info:info,
changeInfo:(value)=>{
setinfo(value)
}
}}>
<div>
{
filmList.map(item=>
<FilmItem key={item.filmId} {...item}></FilmItem>
)
}
<FileDetail></FileDetail>
</div>
</GlobalContext.Provider>
)
}
3 通过 useContext(GlobalContext) 可以直接只用提供者属性和方法
function FilmItem(props){
let { name, poster, grade,synopsis } = props;
const value = useContext(GlobalContext)
console.log(value,'--------123')
return <div onClick={()=>{
//使用提供者方法
value.changeInfo(synopsis)
}}>
<h4>{name} </h4>
<div style={{display:'flex',alignItems:'center'}}>
<div>观众评分: {grade} </div>
<img src={poster} style={{width:'50px',height:'50px;',marginLeft:'10px'}} alt='alt'></img>
</div>
</div>
}
function FileDetail(){
const value = useContext(GlobalContext);
return <div className='filedetail'>
//使用提供者属性
detail=== { value.call } == { value.info }
</div>
}