reactjs - 转换“加载” HOC以使用挂钩，并避免 react 导航问题

我制作了一个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挂钩或做一些我不会弄乱navigationOptions的事情，并且还封装了Loading组件和逻辑。

最佳答案

我在react-navigation上遇到了完全相同的问题，并且我很确定没有真正干净的解决方案，因为设置navigationOptions静态属性的概念首先并不是很好（他们应该我认为这已经引起了人们的关注）。

因此，要么复制navigationOptions（正在做什么），要么，如果这对您当前的体系结构来说不是太麻烦，则将所有内容放入一个没有被另一个HOC包装的MyScreen组件中，如下所示：

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