it-swarm.com.de

ReactJS Wie wechselt man in React zwischen den Seiten?

Aus einem Angular/AngularJS-Hintergrund kommen also Zustände, und jeder Zustand ist eine eigene Seite. Z.B. In einem sozialen Netzwerk können Sie einen Status mit Ihrem Feed, einen Status mit einer Liste Ihrer Freunde oder einen Status zum Anzeigen eines Profils usw. haben. Ziemlich unkompliziert. Nicht so sehr in React für mich.

Nehmen wir an, ich habe eine Anwendung mit 2 Seiten: eine Produktliste und eine einzige Produktansicht. Was wäre der beste Weg, um zwischen ihnen zu wechseln? 

Die einfachste Lösung ist, ein Objekt zu haben, das einen stateName hat und ein boolean ist.

constructor() {
  super();

  this.state = {
    productList: true,
    productView: false
  }
}

Und dann haben Sie so etwas in Ihrer render () - Funktion 

return() {
  <div className="App">
    // Or you could use an if statement
    { this.state.productList && <ProductList /> }
    { this.state.productView && <ProductView product={this.state.product} /> }
  </div>
}

Ziemlich unkompliziert, richtig? Sicher, für eine 2-seitige Anwendung.

Was aber, wenn Sie eine große App mit 10 , 20 , 100 Seiten haben? Der return () Teil des Renderings wäre ein Durcheinander und es wäre Wahnsinn, den Status jedes Zustands zu verfolgen.

Ich glaube, es sollte einen besseren Weg geben, um Ihre App zu organisieren. Ich habe versucht, herum zu googeln, aber ich konnte nichts Nützliches finden (außer bei Verwendung von if else oder bedingten Operatoren ).

6

Ich empfehle Ihnen, React-Router zu überprüfen, um diese Situation zu lösen

Sie können ganz einfach benutzerdefinierte Routen wie folgt erstellen:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;
5
manelgarcia

Das Problem, das Sie angesprochen haben, kann als Umgang mit dem Routing in der App behandelt werden. Sehen Sie sich dazu die verfügbaren Lösungen an, wie zum Beispiel React-Router .

Eine andere Möglichkeit, dieses Problem anzugehen, besteht darin, die Darstellung der Logik für verschiedene Seiten auf die Komponente zu verlagern und dann die Seite basierend auf als Requisiten übergebenen Daten zu rendern. Dafür können Sie ein einfaches, altes JavaScript-Objekt verwenden.

0
Andrzej Smyk