React数据共享useContext怎么实现
导读:本文共2288字符,通常情况下阅读需要8分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 问题:ReferenceError: Cannot access 'Context' before initialization This error happened while generating the page. Any console logs will be displayed in the terminal window.引用错误... ...
目录
(为您整理了一些要点),点击可以直达。问题:
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
的位置调整,甚至只保留一个 , 依然无法解决。
后来我试试可能组建声明的类型问题。
我平时对于写组建的方式比较随意。
最喜欢的一种方式就是
React.FC是函数式组件写法,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent ( 我对这种写法感觉太过于冗余 )
还有很多习惯使用class components
这是三种的构造方式
createContext 函数返回的有3个属性分别是 Provider ( 提供者 )、Customer( 消费者 )、displayName ( 貌似用不到 )
其实关键的还是用函数方式来接受函数的Provider , 类组件来接受类组件的Provider。保证构造的一致。
PS:useContext
我个人觉得对于小型项目还是非常的不错,但是对于复杂的数据,他的分层意识还是不够清晰。thunk
、saga
、mobx
都在一定程度上在分层上更适合context
。当然你也可以对context
更进一步封装。适合自己的才是最好!
React数据共享useContext怎么实现的详细内容,希望对您有所帮助,信息来源于网络。