react-context

问题 I have a problem when adding components to the entry point, this error immediately pops up here, how to fix it? I also try add only Main component but anyway i take that error, in main.jsx just class with render method return "hello world" _react.default.createContext is not a function // App.jsx import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import 'react-select/dist/react-select.css';

问题 Using the useContext hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues. What I'm not certain about is how to apply changes to the Context Provider values. 1) Is the useContext hook strictly a means of consuming the context values? 2) Is there a recommended way, using React hooks, to update values from the child component, which will then trigger component re-rendering for any components using the useContext hook with

问题 I want to save a simple boolean + userID if a user is authenticated and have it accessible via React Context API. Many guides wrapped their root compoennt with the context Provider. To me it seems wastefull to wrap the whole app. On the other hand I need this information to be available in all my main pages. Does it have any negative consequenses to wrap your whole app with a React Context Provider? Example: class App extends Component { render() { return ( <MyProvider> <div className="App">

问题 I am using Gatsby as a static site generator. I use React Context API to store the information that a user is authenticated. In development mode when I type in any URL that redirects to the 404 error page the context data is lost. When I navigate to a valid page a previously logged in user is not logged in any more. I have never worked with React Context before so I am unsure what to do about it. Is that intended behavior? Are there ways to keep the user specific React Context? Do I have to

问题 I am testing out React's Context API and have successfully passed down my state items and a method to a Consumer component. However, when I add some conditional logic to the method I am losing reference to the state object items. I get a "Cannot read property 'color' of undefined" error. How do I reference by color key in that state object so I can run the logic? Am I able to do this in the Provider component or am I only able to do this logic in the Consumer component? Provider Container

问题 I am trying to get my head around ReactJs context, and have finally made some progress to display the state name and countNumber. However I am still struggling to work out how to replace the current state, which is used in my formatCount() function. Can anyone let me know how you would do this in my example below? I would like to use the number in my context e.g. 5 in the method, formatCount(), so it would be something like formatCount() { const currentCount = {c.state.currentCount}; return

问题 I have a React class called GlobalDataProvider : import React, { Component } from 'react'; const DataContext = React.createContext(); export default DataContext; export class DataProvider extends Component { state = { title: 'Some title' } render() { return ( <DataContext.Provider value={{state: this.state}}> {this.props.children} </DataContext.Provider> )} } And I am trying to use data in another file "PageSection.js" like this: import React from 'react'; import DataContext from '../data

问题 I am learning about the somewhat newly introduced React.Context API, but I've noticed some inconsistencies on it's consumption across examples. Some use the original Context.Consumer HOC method, while some (including the React Docs) use the static Class.contextType method. What's the difference and why the inconsistency? 回答1: Turns out that the static Class.contextType was newly introduced on React v16.6.0, as the Context.Consumer method proved problematic on class components. Also, there

问题 MyContext.js import React from "react"; const MyContext = React.createContext('test'); export default MyContext; Created A context separate js file where i can access in my parent as well as my child component Parent.js import MyContext from "./MyContext.js"; import Child from "./Child.js"; class Parent extends Component { constructor(props) { super(props); this.state = { Message: "Welcome React", ReturnMessage:"" }; } render() { return ( <MyContext.Provider value={{state: this.state}}>

问题 I'm wondering what the recommended best practice is for manipulating and exposing the new React Context. The easiest way to manipulate context state seems to be to just attach a function to the context that either dispatches ( usereducer ) or setstate ( useState ) to change its internal value once called. export const TodosProvider: React.FC<any> = ({ children }) => { const [state, dispatch] = useReducer(reducer, null, init); return ( <Context.Provider value={{ todos: state.todos, fetchTodos: