如何从组件(函数)内部导出上下文?

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>
</>
);
}

这里我需要使用一些参数，我从queryParams和一些自定义钩子和那些参数，我需要通过上下文传递。但我无法导出上下文作为组件本身是一个默认的导出，我不能保持上下文外，因为我需要从自定义钩子的数据，我也不能保持在函数之外。我尝试命名出口和创建一个单独的js文件的出口，但我需要一个函数，我将不得不保持自定义钩子在里面。

Answer 1

您应该创建一个名为OrderContext.ts的文件，并在模块范围内使用React.createContext()。这样我们就可以在任何组件和自定义钩子中轻松地导出和导入上下文。

此外，您可以将自定义钩子返回的数据传递给OrderContext.Provider组件的valueprop。以便后代组件可以通过useContext(OrderContext)获取和使用上下文值。

。

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>;
};

演示:stackblitz