Ich versuche isomorphicaly zu machen reagieren, und es macht, aber ich die Warnung/Fehler bei Client erhalten sagen:Reagieren Server-Rendering -> Ersetzen Reagieren gerenderte Kinder mit einem neuen Stammkomponente

I‘ m mit jspm und npm als Paketmanager;

warning.js:25 Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

Die Quelle outputed nach Server renderToString:

<div id="reactRoot"><div data-reactroot="" data-reactid="1" data-react-checksum="845161664"><marquee data-reactid="2"><h1 data-reactid="3">App</h1></marquee></div></div>

Die Quelle ersetzt durch nach dem Rendern react:

<div id="reactRoot"><div data-reactid=".0"><marquee data-reactid=".0.0"><h1 data-reactid=".0.0.0">App</h1></marquee></div></div>

Die Middleware-Server Express:

import App from './components/App/App.jsx'; 
// [...] Express code removed for brevity 
app.use('*', (req, res, next) => { 
    try { 
    res.render('index.html', { 
     reactHtml: renderToString(
     <App /> 
    ) 
    }); 
    } catch (err) { 
    next(err); 
    } 
});

Die index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>App</title> 
    <script> 
    console.log('Running on <%- @env %> environment!'); 
    <% if (@env == 'development') : %> 
    System.import('systemjs-hot-reloader/default-listener.js'); 
    <% end %> 
    System.import('/app.jsx!') 
    .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
    <div id="reactRoot"><%- reactHtml %></div> 
</body> 
</html>

Ich verwende ect als Template-Engine hier;

Die app.jsx:

import { render } from 'react-dom'; 
import App from './components/App/App.jsx'; 
const mountPoint = document.getElementById('reactRoot'); 
render(
    <App />, 
    mountPoint 
);

Die App/App.jsx:

import React from 'react'; 

const App =() => (
    <div> 
    <marquee><h1>App</h1></marquee> 
    </div> 
); 

export default App;

Quelle

2016-04-15 wesleycoder

das gleiche Problem, versucht herauszufinden, – istinspring

Für mich war etwas über den Ausgangszustand vom Server zum Client. Ich habe viel zum Stack hinzugefügt, so dass ich nicht genau herausfinden kann, was den Fehler verursacht hat, aber da meine App nicht gestoppt wurde, konnte ich fortfahren. Jetzt habe ich eine Menge Zeug als Reaktion-Router-Komponente, Redux, React-Look ... Also ich kann nicht sagen, was dieses Problem gelöst hat ... In einer Minute werde ich einen Punkt hier mit einigen meiner veröffentlichen Setup hofft, dass es helfen kann. – wesleycoder

[Hier ist der Kern] (https://gist.github.com/wesleycoder/e1c87bcac6f44df922ea1ac7156c84ba) – wesleycoder

Verwenden renderToStaticMarkup

// render the dynamic code of the page to a string. 
var appHtml = React.renderToString(<Application/>); 

// now use React as a static templating language to create the <html>, 
// <head>, and <body> tags 
var fullPageHtml = React.renderToStaticMarkup(<HtmlPage content={appHtml}/>); 

res.write(fullPageHtml);

Vollständige Ausgabe Auflösung Diskus sion finden Sie hier. https://github.com/aickin/react-dom-stream/issues/4

Quelle

2016-08-28 10:03:07

Reagieren Server-Rendering -> Ersetzen Reagieren gerenderte Kinder mit einem neuen Stammkomponente

Antwort

Verwenden renderToStaticMarkup

Verwandte Themen