Как завершить работу компонента React?

Question

[pink2floyd]

У меня есть компонент App, который запустил другой компонент Login и теперь я хочу завершить работу компонента Login и вернуться к работе App. Как это сделать ?

Comments

[Yustas Alexu]

Я так понимаю вы делаете авторизацию? Делайте через react-router, так будет проще.

[pink2floyd]

Yustas Alexu, видимо это и остается. Спасибо.

Answer 1

[Антон Спирин]

Я вам уже писал про роутинг. Посмотрите этот пример.
Если точно уверены, что роутинг вам не нужен, то используйте условный рендеринг.

Comments

[pink2floyd]

Думаю придется перелопатить код как вы говорите под роутинг. Надеялся что есть какая-нибудь функция для прекращения работы компонента. Подожду ответа Robur может он посоветует что-то похожее.

[pink2floyd]

И да, спасибо что уже второй раз пытаетесь мне помочь.

Answer 2

[Robur]

размонтировать его, перерендерив родительский компонент без Login.

Comments

[pink2floyd]

А как перерендерить родительский компонент, если я нахожусь в компоненте Login ?

[Robur]

pink2floyd, вы находитесь не только в Login, но еще и "в" том компоненте который рендерит Login.
вам надо что-то поменять чтобы он перестал это делать. Что поменять - вариантов масса.

например в стейте заведите переменную showLogin и ставьте ее в true когда надо показать и false когда надо скрыть окно логина, и в зависимости от этой переменной либо рендерите login либо нет.
Можно и роутинг, как вам ниже сказали.

[pink2floyd]

Robur, ну вот смотрите я открыл по условию страницу Login там ввел данные, как мне сказать компоненту App что пора менять рендер, ведь я нахожусь в компоненте Login и не могу менять state родительского компонента ?

[Robur]

pink2floyd, два метода я уже вам привел.

Например - чтобы поменять стейт родительского компонента - передайте в login колбек, который будет вызван когда надо логин скрыть (вы залогинились или нажали на крестик или еще что) в этом колбеке уже делаете setState() в родительском компоненте.

[Robur]

С роутингом все еще проще - вы просто в login делаете history.pusр() на какую-то другую страницу, на что у вас в соответствующем месте происходит рендеринг, роут с Login не рендерится (и соответственно удаляется), а какой-то другой компонент рендерится вместо него.
Но я бы советовал сначала сделать без него, для лучшего понимания как оно вообще все в реакте работает.

[pink2floyd]

Robur, Спасибо

Answer 3

[WizardW]

Заходите на App, делаете нужно работу и в конце хендлера или в любом другом месте делаете history.push('/somewhere')