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>

}