Могу ли я использовать matchPath без дочернего компонента?
Допустим, у меня есть этот компонент с myCurrentState со значением 0.
И я хотел бы изменить его на 1, когда меня направляют на ConfirmComponent(/), и обратно на 0, когда меня направляют обратно на RootComponent(/confirm)
class MySpecialComponent extends Component {
constructor() {
super();
...
}
}
state = {
myCurrentState: 0,
};
<Router>
<div>
<Route
path = "/"
render = {() => <RootComponent />}
exact
/>
<Route path = "/confirm" render = {() => <ConfirmComponent />} />
</div>
</Router>
Большинство примеров (matchPath, match), которые мне удалось найти, были примерами с добавлением кода в дочерние компоненты. Но хотелось бы сделать это все в этом основном MySpecialComponent компоненте.
Может ли кто-нибудь привести мне примеры, если это возможно, и если да, то как :)?
Может быть, из-за того, что я все еще не знаю, как реагировать, но я не могу понять, как это сделать внутри ребенка, если у меня нет события onClick. Например, в RootComponent я использую <NavLink to = "/confirm"><button type = "button">Continue </button> </NavLink>... Мне показалось, что это не правильное место для добавления изменение состояния.
Это просто странно, потому что я хочу знать путь внутри родителя, почему дочерний компонент должен заботиться о том, какой у меня текущий путь: D
Можно ли иметь атрибут onClick внутри <button>, который находится внутри NavLink - если это нормальный способ, то мне, вероятно, придется пойти по этому пути
не помещайте его в onClick, поместите его в конструктор дочернего элемента. визуализируемый дочерний компонент зависит от пути, и вы можете передавать разные реквизиты в зависимости от пути. Я опубликую пример ниже
Ответы 1
Как мы обсуждали в комментариях, если у вас все в порядке с добавлением кода в дочерний элемент, это возможное решение.
class MySpecialComponent extends Component {
constructor() {
super();
...
}
changeValue = (value) => {
this.setState({myCurrentState: value});
}
state = {
myCurrentState: 0,
};
render = () => <Router>
<div>
<Route
path = "/"
render = {() => <ConfirmComponent updateParentState = {() => this.changeValue(1)}/>}
exact
/>
<Route path = "/confirm" render = {() => <RootComponent updateParentState = {() => this.changeValue(0)} />} />
</div>
</Router>;
}
К вашему сведению, я думаю, что в вашем примере компоненты Root и Confirm могут быть перепутаны в зависимости от того, что вы хотите сделать.
В дочерних компонентах
class RootComponent extends Component {
constructor(props){
super(props)
this.props.updateParentState(); //updates state of parent
}
...
}
class ConfirmComponent extends Component {
constructor(props){
super(props)
this.props.updateParentState(); //updates state of parent
}
...
}
Попробую через минуту ;) Не смешанный :p Я просто использовал случайные имена, чтобы сделать его более общим :D Как в root и / и подтвердите с помощью /confirm
И в панели навигации я отображаю текущий активный шаг (корень или подтверждение, и поэтому значения равны 0 и 1 в зависимости от того, в каком компоненте открывается банкомат)
Здорово, это работает! :) Но теперь я понял, что не использую matchPath :D Является ли предложенный подход лучше, чем использование reactRouter match?
Вы должны решить это для себя, но я бы сделал так. Я не слишком знаком с match и matchPath, и после краткого просмотра документации я не вижу смысла
Есть ли причина, по которой вы не хотите добавлять код в дочерние компоненты? Если нет, вы можете вызвать функцию из дочернего элемента в конструкторе (переданную как опору из MySpecialComponent), чтобы изменить состояние