useContext
- 应用场景:非父子组件通信,使用 const GlobalContext = React.createContext() // 创建供应商
- 供应商提供数据
// App组件提供数据
<GlobalContext value={{
test: "这是一个测试数据"
}}></GlobalContext>
- 组件消费数据
const value = useContext(GlobalContext)
console.log(value); // { test: "这是一个测试数据"}
- 举个栗子
/*
* @Author: HuangBingQuan [email protected]
* @Date: 2022-11-23 15:08:14
* @LastEditors: HuangBingQuan [email protected]
* @LastEditTime: 2022-12-01 01:58:11
* @FilePath: /react_test/src/02-advanced/06-中间人模式.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { Component, useContext, useEffect, useState } from 'react'
import axios from 'axios';
import './css/communinaion.scss'
const GlobalContext = React.createContext() // 创建供应商
const FilmItem = ({ name, poster, grade, synopsis })=> {
const value = useContext(GlobalContext) // 接收供应商提供的数据
return (
<div className='filmitem' onClick={(e)=> {
// console.log(value);
value.changeCon(synopsis)
// callback(synopsis)
}}>
<img src={poster} alt={name}></img>
<h4>{name}</h4>
<div>观众评分:{grade}</div>
</div>
)
}
const FilmDetail = ()=> {
const value = useContext(GlobalContext) // 接收供应商提供的数据
return <div className='filmdetail'>{value.con}</div>
}
export default function App() {
const [filmList, setFilmList] = useState([]);
const [con, setCon] = useState("");
const getData = ()=> {
return async()=> {
let { data: { data: { films } } } = await axios({ url: "/test.json", method: "get" });
console.log( films );
setFilmList(films)
}
}
useEffect(()=> {
getData()();
}, [])
return (
// 供应商
<GlobalContext.Provider value={{
name: "zhangsan",
age: 29,
con: con,
changeCon: (val)=> {
console.log(val);
setCon(val)
}
}}>
<div>
{
filmList.map(item =>
<FilmItem key={item.filmId} {...item} callback={(value)=> {
setCon(value)
}}></FilmItem>
)
}
<FilmDetail></FilmDetail>
</div>
</GlobalContext.Provider>
)
}
标签:层级,const,GlobalContext,value,console,useContext,组件,return
From: https://www.cnblogs.com/bingquan1/p/16940292.html