3

反応を同形にレンダリングしようとしていますが、レンダリングされますが、クライアントで次のような警告/エラーが表示されます。

パッケージ マネージャーとして jspm と npm を使用しています。

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.

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>

レンダリング後に反応に置き換えられたソース:

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

高速サーバー ミドルウェア:

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);
  }
});

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>

ここではテンプレート エンジンとして ect を使用しています。

app.jsx：_

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

App/App.jsx：_

import React from 'react';

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

export default App;
4

1 に答える 1

1

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);

問題解決に関する完全な議論は、ここで見つけることができます。 https://github.com/aickin/react-dom-stream/issues/4

于 2016-08-28T10:03:07.353 に答える