react-context

问题 I have a situation where I want to pass a value using Context + Hooks to another component, but the problem is that I do not need to import the component inside the provider to get the value in more understandable language, then imagine that I have two SideBarBlurChange components and SideBar inside the SideBarBlurChange component, I have a value in my case, this is a simple number that I want to pass inside the SideBar component, but the problem is that I don't want to import the SideBar

问题 I have a component that renders: <View> <SomeContext.Provider value={state}> {props.children} </SomeContext.Provider> </View> I don't understand how to create a method accessible in the following way: <View> <SomeContext.Provider> {(method) => <Button title={"Magic"} onPress={() => { method() }} ></Button> } </SomeContext.Provider> </View> 回答1: Consumer Component You need to consume a context through a Context.Consumer that is a direct descendent of the the relevant Provider . The docs have

问题 I have a wrapper component that creates a context consumer and passes the context value as a prop to a handler component. When the parent of the wrapper component updates, it's causing my handler component to remount instead of just update. const Wrapper = forwardRef((props, ref) => { class ContextHandler extends Component { componentDidMount() { // handle the context as a side effect } render() { const { data, children } = this.props; return ( <div ref={ref} {...data}>{children}</div> ); } }

问题 I am developing a web app using React and here is what I am trying to do: In the highest-order component, check whether the user is logged in and if logged in, update 'userinfo' Context value. In Profile.js, get the 'userinfo' Context value. Check whether 'userinfo' is null or not, and call different APIs accordingly. I wrote the below code. The problem is that there is apparently a time lag for the userinfo context value to be delivered to the component. So when using useEffect() hook,

问题 I have Component A and Component B that both uses the same ReactContext to fetch the data. Whichever component calls the context first, at the end of fetching the data, the Context sets the isFetchingData state to false . Now, when the second component calls the context the isFetchingData state is already set to false. Therefore, it renders the component without waiting for the data. To illustrate: ComponentA => isFetchingData? true => getsData => sets isFetchingData to false. => renders

问题 In create-react-app, I'm trying to simple test with jest but I'm getting this error : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined. A part of my component AppBarUser.js /... const AppBarUser = () => { const classes = useStyles(); const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); const [openDrawer, setDrawer] = useState(false); const [userInfos, setData] = useState({}); useEffect(() => { const fetchData = async () => { try {

问题 In create-react-app, I'm trying to simple test with jest but I'm getting this error : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined. A part of my component AppBarUser.js /... const AppBarUser = () => { const classes = useStyles(); const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); const [openDrawer, setDrawer] = useState(false); const [userInfos, setData] = useState({}); useEffect(() => { const fetchData = async () => { try {

来源： https://stackoverflow.com/questions/52173330/share-data-between-react-components-with-no-relation

来源： https://stackoverflow.com/questions/57694451/access-react-context-value-from-redux-saga-function

来源： https://stackoverflow.com/questions/57694451/access-react-context-value-from-redux-saga-function