Когда использовать HOC, а когда компонент-обёртку?

Question

[eugenedrvnk]

Например, у меня есть такой список роутов:

<Switch>
  <Route path="/login" component={Login}/>
  <Route path="/register" component={Register}/>
  <Route path="/recover" component={Recover}/>
</Switch>

Мне нужно преобразовать каждый из роутов в следующую форму:

<motion.div exit="false">
  <Route path="/register" component={Register}/>
</motion.div>

Как сделать это более правильно без дублирования?

Используя hoc?

const withMotion = children => (
  <motion.div exit="unset">
    {children}
  </motion.div>
)

<Switch>
  [
    withMotion(<Route path="/login" component={Login}/>),
    withMotion(<Route path="/register" component={Register}/>),
    withMotion(<Route path="/recover" component={Recover}/>),
  ]
</Switch>

Или просто создать компонент обёртку?

const MotionRoute = props => (
  <motion.div>
    <Route {...props}/>
  </motion.div>
)

<Switch>
  <MotionRoute path="/login" component={Login}/>
  <MotionRoute path="/register" component={Register}/>
  <MotionRoute path="/recover" component={Recover}/>
</Switch>

Или есть какие-то другие варианты?

Comments

[n1ksON]

а зачем в данном случае хок использовать? если можно обойтись более простым способом, зачем что-либо усложнять?

[G F]

Если это в одном месте у вас, я бы сделал через обычный МАП, чтобы не плодить лишние сущности. Примерно так

const routes = [
  {
    path: "/login",
    component: Login
  },
  {
    path: "/register",
    component: Register
  },
  {
    path: "/recover",
    component: Recover
  }
]

<Switch>
  {routes.map(route => 
    <motion.div exit="unset">
      <Route path={route.path} component={route.component}/>
    </motion.div>)}
</Switch>