Question

我了解React中的特定级别的HOC。我只是有点困惑它们是如何呈现的。所以可以说我有以下内容

export const authenticateUser = WrappedComponent => props => (
  props.authenticated ? <WrappedComponent {...props} /> : <div> Please log in to continue </div>
)

这是我的HOC（上方）。我想拥有一个将所有组件包装在其中的HOC，如果用户通过了身份验证（登录），则他们可以查看该屏幕。如果不是，那么我告诉他们登录。非常简单，暂时没有精美的身份验证内容。只会是布尔布尔值，这样我就可以使HOC正常工作

然后我在哪里打电话给authenticateUser

我已将其导入到主文件中

，然后将其分配给const，如下所示：

const auth = authenticateUser(welcomeScreen)

但是我仍然不是完全渲染auth的方式。香港专业教育学院试图做{auth}，但这似乎不正确。

我也不完全确定将...props传递到包装组件中的位置。有什么建议吗？

Answer 1

这取决于您在哪里需要它，我想说您可能想像这样将其放在App.tsx中

return (
   ....
   <Auth />
   ....
)

请记住，您需要将auth更改为Auth

如何在React中渲染HOC？

1 个答案: