React uses context for cross-level component data transfer

Application: There is no need to manually add props for each layer of components, which can pass data between component trees.

1. Create a context

import React, { useMemo, useState } from 'react';

export interface ContextState {
  viewRef?: &lt;null&gt;;
  activeIndex: number;
  setActiveIndex: (data: number) =&gt; void;
}

// Create a contextexport const Context = &lt;ContextState&gt;({
  activeIndex: 0,
  setActiveIndex: () =&gt; {},
});

const ContextProvider: &lt;
  { children:  } &amp; {
    viewRef: &lt;null&gt;;
  }
&gt; = ({ children, viewRef }) =&gt; {
  // Use useState to listen for state changes  const [activeIndex, setActiveIndex] = useState(0);

  const value = useMemo(() =&gt; {
    return {
      viewRef,
      activeIndex,
      setActiveIndex, //Update objects and data through context, you can pass them in state    };
  }, [showQuizsAnswer, shotViewRef, viewRef]);

  // Context provides a Provider component and wraps the self-component. The props name here must be value  return &lt; value={value}&gt;{children}&lt;/&gt;;
};

export default ContextProvider;

To update the context, combine it with state. Declare a state variable in the parent component and pass the current state to the provider as a context value.

The above writing method can be referenceduseContext。

2. Provide context

import ContextProvider from './ContextProvider';

function App() {
  // The following writing method is invalid and cannot be used in the parent component  // const {  setActiveIndex, activeIndex } = (context);
  
  return (
    // Use the provider to wrap it, and then all subcomponents can obtain the data of the provider closest to it    &lt;ContextProvider viewRef={viewRef}&gt;
      &lt;ChildComponent onChange={handleChange} /&gt;
    &lt;/ContextProvider&gt;
  );
}

Note: The context cannot be consumed here because it belongs to the parent component.

useContext() is always looking for the nearest provider on the component that calls it. It searches upwards, regardless of the provider in the component calling useContext(). So the above commented out is wrong.

3. Use context

function ChildComponent() {
  // Use the useContext hook to access the value of the Context  const { setActiveIndex, activeIndex } = (MyContext);

  //Call setActiveIndex function in child component to change the value value  const handleInputChange = (newValue) =&gt; {
    setActiveIndex(newValue);
  };

  return (
    &lt;TextInput value={activeIndex} onChangeText={handleInputChange} /&gt;
  );
}

This is the article about React using context for cross-level component data transfer. For more related React context component data transfer content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!