你如何在 React 中渲染 HOC？

Question

我对 React 中的 HOCs 有一定的了解。我只是有点困惑它们是如何呈现的。所以假设我有以下

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？

how do you render HOCs in React?

javascript

higher-order-functions

reactjs

higher-order-components