J'ai essayé de déterminer comment faire réagir sur le serveur (nœud / express) et a finalement trouvé un tutoriel assez simple pour comprendre ce qui se passe. Mais maintenant, après avoir tout mis en place, j'obtiens une erreur dans la méthode Voici mon fichier de composant: p> Je reçois une erreur lorsque j'exécute document n'est pas défini p>
BlockQuote> Comment puis-je contourner cela? Ai-je besoin ou pas besoin de la méthode de rendu? p> Pour donner plus de contexte, ce composant code> code> est requis par un autre composant: P> réact.Render code>: NPM Démarrer CODE>: P>
require('node-jsx').install();
var React = require('react');
var Component = require('../custom-modules/test-react-server-module.js');
var express = require('express');
var router = express.Router();
router.get('/react', function(req, res, next) {
var markup = React.renderToString(Component());
res.send(markup);
});
module.exports = router;
3 Réponses :
Vous devez utiliser le React-Dom / Server 's Rendertostring fonction dans l'environnement du serveur. Cela retournera le HTML comme une chaîne que vous pouvez envoyer dans votre réponse express.
Je vois, pourriez-vous peut-être modifier la partie pertinente de mon code et me montrer ce que je dois faire? Ou voici une question, ai-je juste besoin du paquet de réacteur-DOM dans Index.js?
Tout d'abord, je vous recommande de mettre à jour votre version réactive. La version actuelle expose deux API de niveau supérieur différents: Il y a des choses à signaler ici: p> Vous essayez d'exécuter un code censé être exécuté uniquement au navigateur. Il n'y a pas de document Pour une application isomorphe réagissant, vous devez disposer d'un fichier Comprendre le Rendu à un réactionnement dans le DOM dans le conteneur fourni et renvoie une référence au composant (ou renvoie null pour les composants apatrides). p>
Si le réactif a été préalablement rendu dans le conteneur, cela sera
effectuer une mise à jour dessus et ne mauve que le dom si nécessaire pour
refléter le dernier composant de réaction. P>
blockquote> garder à l'esprit, encore une fois, que ReactDom.Render ne doit être utilisé que quelques fois et généralement au niveau supérieur de votre application, juste une fois. strong> p> avoir dit cela, votre pour que cela fonctionne correctement, vous devez créer un composant principal à l'intérieur de votre enfin mais non le moins:
Webpack code> pour emballer ce fichier de composant et les servir sur le navigateur. P> li>
client.js code> qui appelle la fonction de rendu pour le même composant que vous essayez de rendre à l'intérieur index.js . Je l'ai? P> LI>
ul> ReactDom.Render code>, comme indique la documentation: P>
box.js.js code> doit ressembler à: p> composant principal-file.js code>: p> Bundle.js code> Vous devez vous assurer que ceci est Être appelé afin que le composant principal essaie de re-rendu: p> index.js code>, le fichier de serveur. Changer réact.rendertostring code> à réagissantdomserver.rendertostring code>, créez un élément de réact de votre composant principal et utilisez-le: p> var element = React.createElement(Component)
router.get('/react', function(req, res, next) {
var markup = ReactDOMServer.renderToString(element);
res.send(markup);
});
Bonjour merci beaucoup pour l'explication. Quel paquet est-il installé avec NPM pour React-Dom / Server? NPM Installez React-Dom / Server ?
Ok l'a eu. désolé une autre question. Donc, utiliser ReactDom.Render Dois-je exiger aussi un autre paquet? Ou je dois juste avoir besoin de réagir et je peux accéder à ReactDom?
Oh attendez, probablement le paquet de réacteur que je viens d'installer correctement?
lol désolé de vous déranger à nouveau mais je suis toujours confondu à propos d'une chose. Quand j'échange réagit.Render à ReactDom.Render, comment est-ce censé regarder? Est-ce que je supprimais le "document" référence?
Comme je l'ai mentionné sur ma réponse, le gestionnaire de réacteur.Render doit être appelé très peu de fois. Vous devez appeler le réacteur.Render sur le même composant que vous essayez de rendre sur le serveur. IMHO, vous appelez à la mauvaise composante. Peut-être que je devrais inclure cela à ma réponse?
Oui s'il vous plaît, ce serait utile! :) Si vous pouviez réparer tout autre code erroné, j'ai et me montrerai comment corriger cela parce que je ne peux toujours pas obtenir le composant pour rendre le côté client.
Le point de la demande de réagissage isomorphique consiste à utiliser les mêmes composants pour rendre sur le serveur et à reformuler au client. Donc, si vous rendant le composant du serveur, sur le fichier client.js qui entre dans votre étiquette de script devrait essayer de reformer le composant A, également. C'est clair maintenant? :)
Mis à jour depuis que fb dit maintenant réact.createfactory () est considéré comme "héritage". réactjs.org/docs/react-api.html#createfactory fonctionne avec React.Createelement () directement dans React 16
Vous devez supprimer ce Il n'y a pas besoin pour cela. Ce que vous avez essentiellement dit à réagir de faire est de le rendre juste alors et là-bas. Également si vous utilisez strictement réagissant pour des vues uniquement, vous voudrez peut-être jeter un coup d'oeil à document.body n'existe pas encore parce que vous rendantez-le-serveur et que vous ne présentez pas Il en a besoin parce que vous rendant le composant dans la fonction rendertostring sur demande dans le routeur . (Aussi, je pense que @Peterlyons est correct, alors jetez un coup d'œil à sa réponse). réacteur-routeur en fonction de ce que vous construisez, mais il illustre comment réagir gère le rendu côté serveur et fonctionne avec Express.