将Loading HOC转换为使用Hooks，避免出现反应导航问题

Question

我制作了一个HOC，用于在加载组件时显示加载模式。

export const withLoading = (Component) => {
return function HOCLoading(props) {
const [isLoading, setIsLoading] = useState(false)
return (
<>
<Component
{...props}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Loading isLoading={isLoading} />
</>
)
}
}

我用它作为

export default withLoading(MyComponent)

它一直工作得很好，直到我意识到navigationOptions停止了工作，这是显而易见的，因为withLoading返回了一个没有navigationOptions的组件，所以我的解决方法是。

const LoadingMyComponent = withLoading(MyComponent)

然后将navigationOptions设置为LoadingMyComponent。

但这看起来很糟糕，并没有让它比具有加载和渲染Loading的状态更容易。

有没有一种方法可以将这个HOC转换为react hook，或者做一些我不会干扰navigationOptions并封装Loading组件和逻辑的事情？

Answer 1

我在react-navigation上也遇到过完全相同的问题，我很确定不存在真正干净的解决方案，因为设置navigationOptions静态属性的概念一开始就不是很好(在我看来，他们应该对此做一个挂钩(。

因此，要么复制navigationOptions(您正在做的事情(，要么，如果这对您当前的体系结构没有太大问题，那么您将所有内容都放在一个MyScreen组件中，该组件没有被另一个HOC封装，比如：

const LoadingMyComponent = withLoading(MyComponent);
function MyScreen() {
// You can exchange data with props or contexts if needed
return <LoadingMyComponent />;
}
MyScreen.navigationOptions = { /* ... */ };
// MyScreen is never wrapped in a HOC and its navigationOptions are accessible