您好,登录后才能下订单哦!
这篇“React数据共享useContext怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React数据共享useContext怎么实现”文章吧。
问题:
ReferenceError: Cannot access 'Context' before initialization This error happened while generating the page. Any console logs will be displayed in the terminal window.
引用错误 , 不能在初始化之前访问Context
, 在生成页面的时候就已经发生。在Shell控制台也有显示输出。
我尝试过很多的办法, 例如:换用引用的方式、多个Provider
的位置调整,甚至只保留一个 , 依然无法解决。
后来我试试可能组建声明的类型问题。
我平时对于写组建的方式比较随意。
最喜欢的一种方式就是
import { useState , createContext} from 'react' import Me from './me' export const MyContext = createContext({}); export default function Demo(){ const [say , setSay] = useState(''); return ( <MyContext.Provider value={{say , setSay}}> <div>father</div>谁在讲话 {say} <Me /> </FatherContext.Provider> ) }
React.FC是函数式组件写法,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent ( 我对这种写法感觉太过于冗余 )
import React, { createContext, FunctionComponent, useState } from 'react' import Me from './me' interface DemoProps { say: string; setSay: React.Dispatch<React.SetStateAction<boolean>>; demoString?:string; } const defaultDemoProps: DemoProps = { isDay: true, setIsDay: (day) => day }; export const MyContext = createContext<DemoProps>({...defaultDemoProps}); const Demo: React.FC<DemoProps> = ({ children, ...props }) => { const { say : propIsSay } = props; const [ isSay, setSay ] = useState(propIsDay) return <MyContext.Provider value={{ say,setSay}}> <Me /> </MyContext.Provider> } export default Demo;
还有很多习惯使用class components
import React, { createContext, PureComponent } from 'react' import Me from './me' export const MyContext = createContext({}) export default class Demo extends PureComponent { state = { say:true, } setSay ()=>{ let say = !this.state.say this.setState({ say }); } render() { return( <MyContext.Provider value={{ say,setSay}}> <Me /> <MyContext.Provider> ) } }
这是三种的构造方式
createContext 函数返回的有3个属性分别是 Provider ( 提供者 )、Customer( 消费者 )、displayName ( 貌似用不到 )
import React, { Context, PureComponent } from 'react'; import {MyContext} from '../components/data'; import Memo from '../components/classDemo'; export const MyContext = React.createContext() export default class CurstomerDemo extends PureComponent { static contextType = MyContext // 重点是这句 用来指定 constructor(props) { super(props); } handleClick = () => { console.log (this.context) // 获取上下文 Provider 属性 } render() { return ( <div> <button>Provider</button> <button onClick={this.handleClick}>Customer</button> </div> ) } } import React, { useState ,useContext, createContext} from 'react' import {MyContext} from './Demo' function useCountContext(CounterContext) { const context = useContext(MyContext) //重点这句话,用来获取指定的上线文Context if (!context) { throw new Error('useCountContext must used within Context.Provider') } return context } export default function Me(props){ let context = useCountContext(MyContext) let {say , setSay} = context return ( <div> me <button onClick={()=>{ setSay(say + ',同志们好') }}>come from grandpa Provier {say}</button> </div> ) }
其实关键的还是用函数方式来接受函数的Provider , 类组件来接受类组件的Provider。保证构造的一致。
PS:useContext
我个人觉得对于小型项目还是非常的不错,但是对于复杂的数据,他的分层意识还是不够清晰。thunk
、saga
、mobx
都在一定程度上在分层上更适合context
。当然你也可以对context
更进一步封装。适合自己的才是最好!
以上就是关于“React数据共享useContext怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。