Блог

Например, допустим, у меня есть следующие маршруты:

 <Switch>
  <Route path='/login' component={Login} />
  <Route path='/home' component={HomePage} />
  <Route path='/profile' component={Profile} />
</Switch>
  

И я хочу обернуть эти компоненты в div, чтобы передать стиль и новый реквизит, используя функцию для более многократного использования, вот так:

 <Switch>
  <Route path='/login' component={wrapper(Login, 'red')} />
  <Route path='/home' component={wrapper(Home, 'blue')} />
  <Route path='/profile' component={wrapper(Profile, 'green')} />
</Switch>
  

Где оболочка была бы чем-то вроде этого:

 const wrapper = (component, color) => {
  return (
    <div className='container'>
       <Component color={color} />
    <div>
  )
}
  

Как это возможно? Я попробовал несколько альтернатив, таких как:

 const wrapper = (component, text) => {
  return React.cloneElement(component, {color: text})
 }
  

Но не уверен, как я могу это сделать, используя React.cloneElement или любой другой шаблон.

Вы могли бы использовать render prop вместо component prop и таким образом передавать color prop компонентам.

 <Switch>
  <Route path='/login' render={(props) => <Login color="red" {...props} />} />
  <Route path='/home' render={(props) => <HomePage color="blue" {...props} />} />
  <Route path='/profile' render={(props) => <Profile color="green" {...props} />} />
</Switch>