Как управлять несколькими компонентами React js? - PullRequest
Новая
       33

Как управлять несколькими компонентами React js?

1 голос
/ 01 февраля 2020

Я создаю веб-приложение с использованием React для фронт-энда, я действительно новичок, чтобы реагировать, но, тем не менее, я понимаю основные концепции.

Сейчас у меня есть и индексная страница, которая отображается через Файл моего приложения. js, здесь приведен код: 

import React from 'react';
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom';
import Login from './Components/Login.component';
import Register from './Components/Register.component';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';


function App() {
return (

  <Router>
    <div className="container-fluid blue-container">
      <div className="row justify-content-center">
        <div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
          <img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
        </div>
      </div>
      <div className="row justify-content-center d-flex align-items-center">
        <div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
          <Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
          <Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
        </div>
      </div>
    </div>
    <Switch>
      <Route path="/Login">
        <Login />
      </Route>
      <Route path="/Register">
        <Register />
      </Route>
    </Switch>
  </Router>


 );
}

export default App;

И, как вы можете видеть, я использую два компонента в двух разных файлах: логин и регистрация. Все работает нормально, но у меня возникает проблема, когда я нажимаю Ссылка , приложение отображает h1 , которое должно быть отображено, но дело в том, что оно отображается ПОСЛЕ моего основного контейнера, вот изображение:

(lo go и две ССЫЛКИ находятся в приложении. js код)

enter image description here

Мой вопрос: есть ли способ управления первым компонентом, который будет удален (lo go и две ссылки) после события клика LINK и рендеринга только формы входа / регистрации без использования Javascript или jquery?

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Есть несколько способов go об этом. Я бы предложил поместить ваш основной контейнер (т. Е. Ваш lo go и все, что вам нужно на целевой странице) в другой компонент (назовем его Main), а затем отобразить этот компонент Main по отдельному маршруту, например: 

  <Router>
    <Switch>
      <Route exact path="/">
        <Main />
      </Route>
      <Route path="/Login">
        <Login />
      </Route>
      <Route path="/Register">
        <Register />
      </Route>
    </Switch>
  </Router>

Указание exact path="/" означает, что шаблон будет совпадать только в том случае, если маршрут равен точно"/". то есть оно будет соответствовать myApp.com, но не myApp.com/Login. Теперь ваш Main компонент будет выглядеть так: 

function Main() {
   return(<div className="container-fluid blue-container">
      <div className="row justify-content-center">
        <div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
          <img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
        </div>
      </div>
      <div className="row justify-content-center d-flex align-items-center">
        <div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
          <Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
          <Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
        </div>
      </div>
    </div>)
}
0 голосов
/ 01 февраля 2020

Сделайте его еще одним компонентом React, чтобы вы могли использовать условный рендеринг. Это в основном рендеринг части вашего пользовательского интерфейса, основанный на значении, контролируемом состоянием вашего компонента или реквизитом.

Проверьте эту форму https://reactjs.org/docs/conditional-rendering.html. Они довольно хорошо объясняют, как это работает.

...