Как обернуть компонент React React.cloneElement с помощью функции?

Question

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

<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 или любой другой шаблон.

Answer 1

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

<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>