受保护的反应成分是否是高阶成分？

Question

我已经写了这个HOC来保护我的反应应用程序中的某些区域/路线

import React from "react"

export default (WrappedComponent, AuthenticateComponent) => {
  let Protected = (props) => (
    props.authenticated
    ? <WrappedComponent {...props}/>
    : <AuthenticateComponent {...props}/>
  )
  return Protected
}

使用此功能的唯一路径组件是/account

import React from "react"
import { connect } from "react-redux"

import Protected from "../components/Protected"
import LoginContainer from "./LoginContainer"

let AccountContainer = ({children}) => (
  React.Children.only(children)
)
export default connect(state => state.account)(Protected(AccountContainer, LoginContainer))

但是我越是看到这个，我越想通过简单地重写AccountContainer而不使用HOC就可以解决这个问题：

1。通过直接将受保护的代码嵌入AccountContainer

let AccountContainer = (props) => (
  props.authenticated
  ? <WrappedComponent {...props}/>
  : <AuthenticateComponent {...props}/>
)

2。或者可以重写受保护的组件

let Protected = (props) => (
  props.authenticated
  ? <props.protectedContent {...props}/>
  : <props.authenticateComponent {...props}/>
)

3。或者喜欢让子组件决定流程

let Protected = (props) => (
  props.authenticated
  ? Child.renderOnly(props.children[0], {...props})/>
  : Child.renderOnly(props.children[1], {...props})/>
)

并像这样使用：

render() {
  <Protected authenticated={this.props.authenticated}>
    <ProfilePage/>
    <LoginPage/>
  </Protected>
}

我是HOC的方式（重新使用）？