@ihoooly

Как в реакте заменять один компонент другим по клику?

Всем привет у меня есть два различных блока:
<div className='first'>
  <div>
    <div>Login</div>
    <div><a href="#" className='reg'>or Register</a></div>
  </div>
  <div>
    <input type="text">
    <input type="text">
    <button>Войти</button>
  <div>
</div>

<div className='second'>
  <div>
    <div>Register</div>
    <div><a href="#" className='log'>or Login</a></div>
  </div>
  <div>
    <input type="text">
    <input type="text">
    <input type="text">
    <button>Зарегистрироваться</button>
  <div>
</div>

Они будут располагаться в левой части экрана, по умолчанию показываться должен блок 'login', при нажатии на ссылку 'or Register' должен стираться текущий блок и отображаться другой, ну и собственно далее наоборот будет происходить. Если бы можно было использовать jquery то по клику на ссылку можно было бы просто к блоку с классом 'first' добавить в стиль display:none, а второму блоку дать display:block. Но сейчас поискал и такого в реакте не нашел.

Как в реакте можно это сделать?
  • Вопрос задан
  • 536 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT
Front-end разработчик
Делаете из них отдельные компоненты и рендерите по условию.
Грубо, вот так
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Настоятельно рекомендую перед тем как писать что-либо свое, получше изучить библиотеку и ее возможности, так как вы не знаете ее базовых концепций. Почитайте про управление состоянием и conditional rendering, а лучше весь мануал от корки до корки.

class Example extends Component {
  state = {
    activeForm: 'login',
  };
 
  setActiveForm = name => {
    this.setState({ activeForm: name });
  };

  render() {
    const Form = this.state.activeForm === 'login' ? Login : Registration;

    return (     
      <SideBar>
        <Form setActiveForm={setActiveForm} />
      </SideBar>
    );
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы