如何使用同构React处理子组件？

Question

I have server code like this:

var data = {
  scripts: scripts,
  children:[<Comp1 />, <Comp2 />, <Comp3 />]
};

// keeping smaller for easier example than reality
var markup = '';

markup += '<script type="text/javascript">' +
'var PROPS = {' +
  'Layout: ' + JSON.stringify(data) +
'};' +
'</script>';

markup += React.renderToString(
    <Layout {...data} ></Layout>
);

So the server renders everything fine. Then no matter what I try, I get all sorts of warnings about how I'm handling the children for serialization and re-use in the browser when I run: React.render(App(window.PROPS.Layout), document.getElementById('content'));

Many of my attempts make React complain that I should be using createFragment. But when I do that, I still get errors that I should be wrapping it.

My goal is to render the Layout component, with several children, and have React in the browser know the same elements are below. Many attempts also yield this error:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) d=".1frk89jhyio.1"></div><div data-react
 (server) d=".1frk89jhyio.1"><div style="float:lef

My client code is this:

var React = require('react'),
    Layout = require('./components/layout');

React.render(<Layout {...PROPS.Layout} />, document.getElementById('content'));

Answer 1

You shouldn't stringify your components like that to serve for your client. You should just render you application again. Things to stringify should only be raw data like {id: 1, name: 'limelights'} .

On the server

React.renderToString(<Layout {...data} />);

and on the client

var data = JSON.parse(window.PROPS.data);
React.render(<Layout {...data} />, document.body);

The point of having an isomorphic application is that the same code runs on both the server and the client.

Answer 2

The answer is that I was doing things the theoretical wrong way.

Having the server render like <Layout {...data} ><Comp1 /></Layout> will work. However when the browser kicks in, it won't have children props and you'll lose Comp1 . Then I had tried to pass children through in as props like the example in my question. The real way to do this is simply having the server do <Layout {...data} ></Layout> .

The real key to the answer is that the render method of Layout should be placing the children directly. I can use state (or props, still working out semantic differences) within render to determine if children should be different.