@eugenedrvnk

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

Например, у меня есть такой список роутов:
<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>


Или есть какие-то другие варианты?
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы