react-context | 易学教程

Is using Context for communication between components discouraged?

阅读更多关于 Is using Context for communication between components discouraged?

问题 After reading the official documentation about context (https://reactjs.org/docs/context.html), I have a feeling its use should mostly be limited to the situations when we have some variables we could consider "global" that we must send to many components on different nesting levels (like current theme, locale, currently authenticated user). Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or

Redirect React Router from Context Provider

阅读更多关于 Redirect React Router from Context Provider

I'm new to React Router and trying to do a redirect from inside a provider using the new Conext API. basically my provider looks like this. /* AuthContext.js */ class AuthProvider extends React.Component { state = { isLoggedIn: false } constructor() { super() this.login = this.login.bind(this) this.logout = this.logout.bind(this) } login() { this.setState({ isLoggedIn: true }) // Need to redirect to Dashboard Here } logout() { this.setState({ isLoggedIn: false }) } render() { return ( <AuthContext.Provider value={{ isLoggedIn: this.state.isLoggedIn, login: this.login, logout: this.logout }} >

Jest mock react context

阅读更多关于 Jest mock react context

I need some help understanding how one can test an application using React Context . Here's my sample setup. context.js import React from 'react' export const AppContext = React.createContext() App.js import React from 'react' import MyComponent from './MyComponent' import {AppContext} from './context' const App extends React.Component { state = { items: [] } handleItemAdd = newItem => { const {items} = this.state items.push(newItem) this.setState(items) } render() { return ( <AppContext.Provider value={{ addItem: this.handleItemAdd }}> <MyComponent /> </AppContext.Provider> ) } } export

React useReducer Hook fires twice / how to pass props to reducer?

阅读更多关于 React useReducer Hook fires twice / how to pass props to reducer?

问题 FOREWORD / DESCRIPTION I am trying to use React's new hooks feature for an e-commerce website that I am building, and have been having an issue working a bug out of my shopping cart component. I think it is relevant to preface the discussion with the fact that I am trying to keep my global state modular by using multiple Context components. I have a separate context component for the types of items that I offer, and a separate context component for the items in a person's shopping cart.

How to get the data from React Context Consumer outside the render

阅读更多关于 How to get the data from React Context Consumer outside the render

问题 I am using the new React Context API and I need to get the Consumer data from the Context.Consumer variable and not using it inside the render method. Is there anyway that I can achieve this? For examplify what I want: console.log(Context.Consumer.value); What I tested so far: the above example, tested Context.Consumer currentValue and other variables that Context Consumer has, tried to execute Context.Consumer() as a function and none worked. Any ideas? 回答1: Update As of React v16.6.0 , you

React useReducer Hook fires twice / how to pass props to reducer?

阅读更多关于 React useReducer Hook fires twice / how to pass props to reducer?

FOREWORD / DESCRIPTION I am trying to use React's new hooks feature for an e-commerce website that I am building, and have been having an issue working a bug out of my shopping cart component. I think it is relevant to preface the discussion with the fact that I am trying to keep my global state modular by using multiple Context components. I have a separate context component for the types of items that I offer, and a separate context component for the items in a person's shopping cart. PROBLEM The issue I am having is that when I dispatch an action to add a component to my cart, the reducer

How to change React context programatically?

阅读更多关于 How to change React context programatically?

I'm trying to use the new React context to hold data about the logged-in user. To do that, I create a context in a file called LoggedUserContext.js: import React from 'react'; export const LoggedUserContext = React.createContext( ); And sure enough, now I can get access to said context in other components using consumers, as I do here for example: <LoggedUserContext.Consumer> {user => ( (LoggedUserContext.name) ? LoggedUserContext.name : 'Choose a user or create one'; )} </LoggedUserContext.Consumer> But obviously, for this system to be useful I need to modify my context after login, so it can

How should the new context api work with React Native navigator?

阅读更多关于 How should the new context api work with React Native navigator?

问题 I created a multiscreen app using React Navigator following this example: import { createStackNavigator, } from 'react-navigation'; const App = createStackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen }, }); export default App; Now I'd like to add a global configuration state using the new builtin context api, so I can have some common data which can be manipulated and displayed from multiple screens. The problem is context apparently requires components having a

set react context provider state programatically from outside the tree

阅读更多关于 set react context provider state programatically from outside the tree

问题 I'm adding React to an existing webapp. For now, I'm selectively replacing parts of the page, rendering different components in different divs. For this reason I don't have a single tree from where all components hang. I would like to use one context provider to share context information across all these components, but since I don't have a single tree I can't make them all hang from the same context provider. Is there a way to use the default context defined like this? const MyContext =

set react context provider state programatically from outside the tree

阅读更多关于 set react context provider state programatically from outside the tree

I'm adding React to an existing webapp. For now, I'm selectively replacing parts of the page, rendering different components in different divs. For this reason I don't have a single tree from where all components hang. I would like to use one context provider to share context information across all these components, but since I don't have a single tree I can't make them all hang from the same context provider. Is there a way to use the default context defined like this? const MyContext = React.createContext(some_data); and to have NO provider from which components hang, rather only consumers?