Как загрузить новый компонент по нажатию кнопки

Question

У меня есть форма, когда пользователь нажимает кнопку Login, я хочу загрузить новый компонент и отключить текущий компонент.Я прочитал о react-router, но похоже, что я могу использовать их для навигации.

Это мой код.

class App extends Component {
  render() {
    return (

      <div className="App">
        <HeaderComponent />      
        <header className="App-header">
            <LoginComponent/> 
        </header>
      </div>
    );
  }

, когда пользователь нажимает Login button, этот метод в LoginComponent.js вызывается.

  handleSubmit = event => {
    event.preventDefault();
    console.log("Login");
  }

Теперь я могу успешно напечатать сообщение Log, но я не могу понять, как загрузить другой компонент в данный момент.

Answer 1

Если вы не хотите, чтобы оно было на отдельной странице, вы можете использовать условное выражение в вашем рендере и изменить состояние при отправке.

Пример:

class App extends Component {
  state = {
    componentShown: false    
   }
  render() {
    return (

      <div className="App">
        <HeaderComponent />      
        <header className="App-header">

           {this.state.componentShown ? <ComponentToRender /> : 
            <LoginComponent/> }    
        </header>
      </div>
    );
  }

А по вашему представлению просто поменяйте штат.

handleSubmit = event => {
    event.preventDefault();
    this.setState({ componentShown: true })
  }