你如何在 React 中渲染 HOC？答案

【问题标题】：how do you render HOCs in React?你如何在 React 中渲染 HOC？
【发布时间】：2019-05-09 03:43:16
【问题描述】：

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

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

这是我的 HOC（上图）。我想要一个 HOC 来包装我的所有组件，如果用户经过身份验证（登录），他们可以查看该屏幕。如果没有，那么我告诉他们登录。非常简单，暂时没有花哨的身份验证内容。将只是一个布尔值，所以我可以让 HOC 工作

然后我在苦苦挣扎，我在哪里打电话authenticateUser

我已经将它导入到我的主文件中

然后将它分配给一个像这样的常量：

const auth = authenticateUser(welcomeScreen)

但我仍然不完全是如何渲染auth。我试过{auth}，但这似乎不正确。

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

【问题讨论】：

标签： javascript reactjs higher-order-functions higher-order-components

【解决方案1】：

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

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

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

【讨论】：

你知道我将如何更改我正在传递的authenticated 属性，以便我可以使用计算的属性键。我想使用相同的 HOC 但传入不同的属性，以便我可以根据不同的身份验证级别显示不同的屏幕
这真的取决于上下文，对此没有一般的答案。但是让我给你一个想法，例如你可以像这样传递userRoles const auth = authenticateUser(userRoles) 这样HOC 会将角色传递到较低级别，并且在较低级别的组件中您可以使用（仅作为示例）props.admin ? <FeatureForAdminOnly /> : null 和@ 987654328@