将函数导出为默认值，同时解构该函数以在同一类中使用

Question

我正在使用 React Context API，我有以下作为示例

import React, { createContext, useState } from 'react';
const FooContext = createContext({
bar: false,
toggleBar: () => {}
});
export const FooContextConsumer = FooContext.Consumer;
export const FooContextProvider = ({ children }) => {
const [bar, setBar] = useState(false);
const toggleBar = () => setBar(!bar);
return (
<FooContext.Provider value={{ bar, toggleBar }}>
{children}
</FooContext.Provider>
)
};
export default FooContext;

现在，这里有很多出口。我知道createContext函数具有{ Provider, Consumer }可用的解构属性。有没有办法使用它来压缩这段代码？我想到了这样的事情，但不幸的是，这不是有效的语法。

import React, { createContext, useState } from 'react';
export default ({ Provider, Consumer }) = createContext({
bar: false,
toggleBar: () => {}
});
export const FooContextConsumer = Consumer;
export const FooContextProvider = ({ children }) => {
const [bar, setBar] = useState(false);
const toggleBar = () => setBar(!bar);
return (
<Provider value={{ bar, toggleBar }}>
{children}
</Provider>
)
};

因此，我想导出createContext函数作为默认值，同时在同一文件中使用该函数的Provider和Consumer属性。这可能吗？

当然，我可以用const和export default来做到这一点，但我想知道这是否可以作为单行

。

Answer 1

您必须命名上下文才能在文件中进一步使用它：

import React, { createContext, useState } from 'react';
const Context = createContext({
bar: false,
toggleBar: () => {}
});
export const FooContextConsumer = Context.Consumer;
export const FooContextProvider = ({ children }) => {
const [bar, setBar] = useState(false);
const toggleBar = () => setBar(!bar);
return (
<Context.Provider value={{ bar, toggleBar }}>
{children}
</Context.Provider>
)
};
export default Context;

我建议使用上下文的实现：

import React, { createContext, useContext, useState } from 'react';
// ...
export const useFooContext = () => useContext(Context);
// ...

Answer 2

我会坚持你的第一个例子。很明显Consumer和Provider属于哪个Context。