2014-10-03 21 views
7

Continuo a ricevere il seguente errore durante il tentativo di rendering lato server utilizzando il nodo ReactJS &.checksum ReactJS non valido

React attempted to use reuse markup in a container but the checksum was invalid. 

Ho visto un answer che passando gli stessi oggetti di scena sul server e client risolve questo problema. Nel mio esempio, non ho oggetti di scena, quindi non sono sicuro che la risposta sia valida per il mio problema.

È possibile visualizzare il mio esempio completo sul mio account github.

Sto includendo il codice importante qui sotto. Qualsiasi consiglio é ben accetto.

JSX

/** @jsx React.DOM */ 
var React = require('react'); 
var index = React.createClass({ 
    render: function() { 
     return (
      <html> 
      <head> 
      <script src="bundle.js"></script> 
      </head> 
      <body> 
      <div> 
       hello 
      </div> 
      </body> 
     </html> 
    ); 
    } 
}); 

if (typeof window !== "undefined") { 
    React.renderComponent(<index/>, document.documentElement); 
} else { 
    module.exports = index; 
} 

Server

require('node-jsx').install(); 
var express = require('express'), 
    app  = express(), 
    React = require('react'), 
    index = require('./index.jsx'); 

var render = function(req, res){ 
    var component = new index(); 
    var str = React.renderComponentToString(component); 
    res.set('Content-Type', 'text/html'); 
    res.send(str); 
    res.end(); 
} 

app.get('/',render); 
app.use(express.static(__dirname)); 

app.listen(8080); 

risposta

13

Change

React.renderComponent(<index/>, document.documentElement); 

a

React.renderComponent(<index/>, document); 

e l'avviso scompare.

Screenshot

+0

A volte, è qualcosa di così semplice. Grazie. Come hai conosciuto la risposta così velocemente? – Nael

+5

Ho avuto un sospetto quindi ho giocato con esso. :) A ben vedere, 'document.documentElement' * è * l'elemento HTML, e' document' * contiene * it, e React esegue il rendering in elementi, quindi se vuoi rendere il tag 'html', devi renderizzare contenitore. –

+0

Ottima risposta. Grazie ancora! – Nael