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

Question

[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. Но сейчас поискал и такого в реакте не нашел.

Как в реакте можно это сделать?

Answer 1

[Владимир Проскурин]

Делаете из них отдельные компоненты и рендерите по условию.
Грубо, вот так

Comments

[ihoooly]

Идеальное объяснение, спасибо!

[Владимир Проскурин]

ihoooly, вот это обязательно прочитайте https://reactjs.org/docs/conditional-rendering.html а еще лучше пройдитесь по всему разделу Main Concepts https://reactjs.org/docs/hello-world.html

[byBasket]

вот только маленькая проблемка, так они теряют своё состояние
пользователь начал вводить емайл переключил компонент, потом обратно - всё пусто!

Answer 2

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

Настоятельно рекомендую перед тем как писать что-либо свое, получше изучить библиотеку и ее возможности, так как вы не знаете ее базовых концепций. Почитайте про управление состоянием и 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>
    );
  }
}

Comments

[Владимир Проскурин]

Вот кстати всегда было интересна одна штука, но в разных style guide не нашел ответа.
setActiveForm - это же event, а это обратный вызов из компонента, значит логично, что он должен называться onSetActiveForm, но многие react разработчики со мной спорят, и говорят пофиг. А как вы не путаетесь?

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

Владимир Проскурин, в том то и дело, что в этом контексте нет. Тут удобней было бы в компонентах формах определить хандлеры, а передается лишь колбек, который будет вызываться хандлером:

const Login extends Component {
  handleRegistrationLinkClick = e => {
    e.preventDefault();
    this.props.setActiveForm('registration');
  };
  render() {
    return (
      <div>
        <div>Login</div>
        <div>
          <a className='reg' onClick={this.handleRegistrationLinkClick}>or Register</a>
        </div>
      </div>
    );
  }
}

Ну вдруг форм потом будет больше.
А так да, для хандлеров по-хорошему писать префикс. Кто-то использует handle кто-то on.
Для прочих колбеков думаю не обязательно. В данном случае у нас ведь просто действие.

[Владимир Проскурин]

Антон Спирин, это логично, спасибо.

Answer 3

[Mikhail Osher]

https://github.com/ReactTraining/react-router
https://github.com/reach/router