Как передать реквизиты с cloneElement компоненту Route?
Скажем, маршруты
<App>
<Route path='/login' component = {Login}/>
</App>
Внутри App.js у меня есть следующие
React.Children.map(props.children, function (child) {
return React.cloneElement(child, {
foo: 'bar'
})
});
Но foo: bar не появляется внутри свойств компонента Login.
Если я заменю <Route path='/login' component = {Login}/> на <Login />, я получу там опору foo: bar.
Мой вопрос в том, как передать реквизиты дочерним элементам приложения (Route), чтобы эти реквизиты передавались соответствующему component.
Ответы 1
Я не уверен, применимо ли это к вашему варианту использования, но <Route> оснащен рендеринг опоры:
<App>
<Route
path='/login'
render = {routerProps => (
<Login
{...routerProps}
foo='bar' />
)} />
</App>
Спасибо. Я понимаю, что можно переформатировать мою дочернюю итерацию, удалить свойство props.component из child и заменить его на render, но я ищу решение, в котором эти реквизиты применимы к компоненту, не делая этого.
@David, я нашел метод React.Children жизнеспособным только в ограниченных случаях; как только вам нужно передать опору более чем на один уровень (например, от App к Route к Login), это становится беспорядочным, и обычно есть лучшее решение, особенно если промежуточный компонент не ваш (например, Route). Возможно, вы захотите изучить контекст, хотя я предполагаю, что это излишне для того, что вам нужно. В противном случае вы можете создать оболочку для Route и использовать в ней React.Children.map для передачи свойств (в дополнение к предоставленному вами образцу кода).
К сожалению, это не работает.
foo: 'bar'из приложения приводит к чему-то вроде<Route foo = "bar" />. Я хочу, чтобы это отражалось в том, что находится вcomponent=. Спасибо