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

Question

我有这样的服务器代码:

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

所以服务器渲染一切正常。然后，无论我尝试什么，当我运行时，我都会收到有关如何处理子级以在浏览器中序列化和重用的各种警告: React.render(App(window.PROPS.Layout), document.getElementById('content'));

我的许多尝试让 React 提示我应该使用 createFragment。但是当我这样做时，我仍然收到错误，我应该包装它。

我的目标是渲染具有多个子组件的布局组件，并让浏览器中的 React 知道下面有相同的元素。许多尝试也会产生此错误:

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

我的客户端代码是这样的:

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

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

Answer 1

您不应该像这样对组件进行字符串化来为您的客户服务。您应该再次渲染您的应用程序。要字符串化的内容只能是原始数据，例如 {id: 1, name: 'limelights'}。

在服务器上

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

在客户端

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

拥有同构应用程序的要点是相同的代码在服务器和客户端上运行。