Wie kann ich die übergabe von Daten aus express-server zu reagieren, Ansichten?

Habe ich eine einfache express server eine Verbindung zu einer Datenbank orientdb.
Ich brauche zum übergeben von Informationen von express, um zu reagieren Blick.
Zum Beispiel, in der express habe ich:

router.get('/', function(req, res, next) {
  Vertex.getFromClass('Post').then(
    function (posts) {
      res.render('index', { title: 'express' });
    }
  );
});

So, in diesem Beispiel, muss ich haben in meinem reagieren, index-Komponente, die posts variable zum festlegen des Zustands der componenent. (Ich bin mit reagieren nur im frontend, nicht auf server-Seite)

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  render() {
    return (
      <div>
        <Posts posts={posts} />
      </div>
    );
  }
}

Wie kann ich die posts reagieren express?

Fand ich, dass ich vielleicht tun können, eine ajax-Anfrage reagieren, aber ich denke, dass das nicht der beste Weg.

Wenn ich müssen zu bekommen, dass die Beiträge in Echtzeit mit socket.io zum Beispiel, was sind die Unterschiede?

PD: In der express habe ich die Möglichkeit, einige template-engine wie LENKER oder hogan. Können diese template-engines helfen, in diesem Thema?

Dank!!!

  • Es gibt keine server-Seite reagieren, es kann nur verwendet werden, im frontend
InformationsquelleAutor Santiago Aranguri | 2016-10-16
  1. 8

    Ich denke, Ihre beste option ist in der Tat eine Art von Netzwerk-Anfrage vom client. Wenn Sie versuchen, zu halten die app einfach und nicht möchten, dass ein State-Management-Bibliothek (z.B. Redux), Sie konnte etwas tun, wie

    class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch('/') //or whatever URL you want
      .then((response) => response.json())
      .then((posts) => this.setState({
        posts: posts,
      });
  }

  render() {
    return (
      <div>
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

    In Ihrem response es sollte eine JSON-Darstellung der Beiträge der Sammlung.

    Beachten Sie auch die render Methode und den Zugriff auf die posts.

    Mehr auf Fetch API finden Sie unter MDN (bitte beachten Sie auch, dass Sie einen polyfill für ältere Browser für Sie).

    EDIT: Für die Steckdose.io, ich würde speichern der Instanz davon irgendwo und übergeben Sie es als requisite, um die Komponente. Dann können Sie etwas tun, wie

    class IndexPage extends React.Component {
  ...
  componentDidMount() {
    this.props.socket.on('postReceived', this.handleNewPost);
  }
  handleNewPost = (post) => {
    this.setState({
      posts: [
        ...this.state.posts,
        post,
      ],
    });
  }
  ...
}

    Die server-Seite ist ähnlich, siehe zum Beispiel Socket.io-Chat Beispiel.

    • Danke! Und wenn ich das tun müssen, in real-Zeit gibt es übrigens eine Funktion wie fetch-in-Buchse.io? Oder ist eine ganz andere Art und Weise in Echtzeit? Was über den server, ist das gleiche
    • Fortsetzung des letzten Kommentars...
    • Was über den server, ist das gleiche, wenn ich die Daten abzurufen, in Echtzeit, oder gibt es viele änderungen?
    • Ich habe nicht viel Erfahrung in real-time-web, aber ich glaube nicht, dass es wirklich wichtig ist, um zu Reagieren. Alles, was Sie tun müssen, ist anrufen setState wenn neue Daten ankommen (es werden einige Rückruf aus der Buchse.io). Die server-Seite verwenden würde-Buchse.io-push-JSON an den client. Es ist am besten, finden Sie einige Tutorials, ich bin sicher, es gibt viele.
    • Ich aktualisierte die Antwort, bitte sehen Sie sich den neuen Teil
    InformationsquelleAutor Dan Homola
Schreibe einen Kommentar