response-router получает this.props.location в дочерних компонентах
67494 просмотра
1 ответ
Как я понимаю, <Route path="/" component={App} />
будет давать App
реквизиты, связанные с маршрутизацией, как location
и params
. Если мой App
компонент имеет много вложенных дочерних компонентов, как я могу получить дочерний компонент для доступа к этим реквизитам без:
- прохождение реквизита из приложения
- используя объект окна
- создание маршрутов для вложенных дочерних компонентов
Я думал, что this.context.router
будет иметь некоторую информацию, связанную с маршрутами, но, this.context.router
похоже, есть только некоторые функции для управления маршрутами.
Ответы (1)
92 плюса
(Обновление) V4 и V5
Вы можете использовать withRouter
HOC для того , чтобы ввести match
, history
и location
в ваших компонентов реквизита.
class Child extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return (
<div>{location.pathname}</div>
)
}
}
export default withRouter(Child)
(Обновление) V3
Вы можете использовать withRouter
HOC для того , чтобы ввести router
, params
, location
, routes
в ваших компонентов реквизита.
class Child extends React.Component {
render() {
const { router, params, location, routes } = this.props
return (
<div>{location.pathname}</div>
)
}
}
export default withRouter(Child)
Оригинальный ответ
Если вы не хотите использовать реквизит, вы можете использовать контекст, как описано в документации React Router
Во-первых, вы должны настроить свой childContextTypes
иgetChildContext
class App extends React.Component{
getChildContext() {
return {
location: this.props.location
}
}
render() {
return <Child/>;
}
}
App.childContextTypes = {
location: React.PropTypes.object
}
Затем вы сможете получить доступ к объекту местоположения в ваших дочерних компонентах, используя такой контекст
class Child extends React.Component{
render() {
return (
<div>{this.context.location.pathname}</div>
)
}
}
Child.contextTypes = {
location: React.PropTypes.object
}
Автор: QoP
Размещён: 30.05.2016 10:44
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- reactjs Реагируйте на js и bootstrap модально из примеров на github
- reactjs реагировать - ссылка на тег
- reactjs this.setState не объединяет состояния, как я ожидал
- reactjs Rerender вид в браузере изменить размер с React
- reactjs Рендеринг компонента React в поповере Bootstrap
- reactjs Как получить доступ к пользовательским атрибутам из объекта события в React?
- react-router Дважды загрузите ReactJS с помощью реакции-роутера.
- react-router response-router - передать реквизиты компоненту обработчика
- react-router URL-адреса React-маршрутизатора не работают при обновлении или записи вручную
- react-router Реагирует на прикосновения неработающих
- react-router React + Router + Google Tag Manager
- react-router Получение параметров запроса из хеш-фрагмента реакции-маршрутизатора