如何从组件（函数）内部导出上下文？

Question

import React from 'react'

export default function OrderDetailsView() {
  const [queryParams] = useSearchParams();
  const params: OrderParams = getOrderParams(queryParams);
  const extraHeaders: ExtraHeaders = getExtraHeaders(queryParams);
  const { data, isLoading } = useOrderParams(params, extraHeaders);

  const orderContext = createContext({data, isLoading})

 
  return (
    <>
      <Provider>
        {
            List of components


        }
      </Provider>
    </>
  );
}

Here I need to use some parameters which I am getting from queryParams and some custom hooks and those params I need to pass through context. But I am unable to export the context as the component itself is a default export and I can't keep the context outside as I need data from custom hook also which I can not keep outside the function. I tried named exports and creating a seperate js file for exports but I will need a function where I will have to keep the custom hooks inside.

Answer 1

You should create a file named OrderContext.ts and use React.createContext() in the module scope. So that we can export and import the context easily in any component and custom hooks.

Besides, you can pass the data returned by custom hooks to the value prop of OrderContext.Provider component. So that the descendant component can get and consume the context value via useContext(OrderContext) .

Eg

OrderContext.ts :

import * as React from 'react';

export const OrderContext = React.createContext({
  data: undefined,
  isLoading: false,
});

OrderDetailsView.tsx :

import * as React from 'react';
import { OrderContext } from './OrderContext';
import { Test } from './Test';

const useOrderParams = (params, extraHeaders) => {
  return { data: 'data from API', isLoading: false };
};

export default function OrderDetailsView() {
  const params = {};
  const extraHeaders = {};
  const { data, isLoading } = useOrderParams(params, extraHeaders);

  return (
    <OrderContext.Provider value={{ data, isLoading }}>
      <Test />
    </OrderContext.Provider>
  );
}

Test.tsx :

import * as React from 'react';
import { OrderContext } from './OrderContext';

export const Test = () => {
  const order = React.useContext(OrderContext);
  return <div>{order.data}</div>;
};

Demo: stackblitz