3

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

4

1 回答 1

0

我遇到了完全相同的问题，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
于 2019-11-24T15:15:13.657 回答