Due to the epidemic, I recently took over a new project. It's React. It has been more than a year since I last wrote React.
Although picking it up is not difficult, it is easy to forget technology if you don’t use it for a long time.
In order to ensure that this project is unified in the technology stack of other parallel projects.
Nextjs, styled-components, useContext, react-query, ts
I won’t focus on introducing the project today, but I will talk about the problems encountered in the project.
This has been going on for almost 2 hours, and I have been troubleshooting the problem.
The last question is also quite strange.
ReferenceError: Cannot access 'Context' before initialization This error happened while generating the page. Any console logs will be displayed in the terminal window.
Reference error, cannot be accessed before initializationContext, which already happens when the page is generated. There is also a display output in the Shell console.
I have tried many methods, such as: using multiple referencesProviderThe position adjustment, even only one, is still unsolvable.
Later I tried the type of the possible assembly declaration.
I usually have a casual way of writing and forming.
One of your favorite ways is
import { useState , createContext} from 'react'
import Me from './me'
export const MyContext = createContext({});
export default function Demo(){
const [say , setSay] = useState('');
return (
< value={{say , setSay}}>
<div>father</div>Who is talking {say}
<Me />
</>
)
}It is a functional component writing method, a generic used in TypeScript. FC is the abbreviation of FunctionComponent. In fact, it can be written as (I feel that this writing method is too redundant)
import React, { createContext, FunctionComponent, useState } from 'react'
import Me from './me'
interface DemoProps {
say: string;
setSay: <<boolean>>;
demoString?:string;
}
const defaultDemoProps: DemoProps = {
isDay: true,
setIsDay: (day) => day
};
export const MyContext = createContext<DemoProps>({...defaultDemoProps});
const Demo: <DemoProps> = ({ children, ...props }) => {
const { say : propIsSay } = props;
const [ isSay, setSay ] = useState(propIsDay)
return < value={{ say,setSay}}>
<Me />
</>
}
export default Demo;There are still many habits to use 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 = !
({
say
});
}
render() {
return(
< value={{ say,setSay}}>
<Me />
<>
)
}
}These are three ways of constructing
The three properties returned by the createContext function are Provider (Provider), Customer (Consumer), and displayName (it seems to be unusable)
import React, { Context, PureComponent } from 'react';
import {MyContext} from '../components/data';
import Memo from '../components/classDemo';
export const MyContext = ()
export default class CurstomerDemo extends PureComponent {
static contextType = MyContext // The point is this sentence to specify constructor(props) {
super(props);
}
handleClick = () => {
() // Get the context Provider property }
render() {
return (
<div>
<button>Provider</button>
<button onClick={}>Customer</button>
</div>
)
}
}
import React, { useState ,useContext, createContext} from 'react'
import {MyContext} from './Demo'
function useCountContext(CounterContext) {
const context = useContext(MyContext) //The key sentence is used to obtain the specified online text Context if (!context) {
throw new Error('useCountContext must used within ')
}
return context
}
export default function Me(props){
let context = useCountContext(MyContext)
let {say , setSay} = context
return (
<div>
me
<button onClick={()=>{
setSay(say + ', Hello, comrades')
}}>come from grandpa Provier {say}</button>
</div>
)
}In fact, the key is to use function methods to accept the provider of function, and class components to accept the provider of class components. Ensure consistency of structure.
PS：useContextI personally think it is still very good for small projects, but his layering awareness is still not clear enough for complex data.thunk、saga、mobxTo a certain extent, they are more suitable for stratificationcontext. Of course you can alsocontextFurther packaging. The best thing for you is!
This is the end of this article about the implementation of React data sharing useContext. For more related React data sharing useContext content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!