javascript - 你如何在 React 中渲染 HOC？

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到包装的组件。有什么建议吗？

标签： javascriptreactjshigher-order-functionshigher-order-components

Answer 1

这取决于你在哪里需要它，我会说你可能想像这样把它放在 App.tsx 中

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

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