如何用同构的React处理子组件

How to handle child components with isomorphic React?

本文关键字：处理 理子 组件 React 何用 同构      更新时间：2023-09-26

我有这样的服务器代码:

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。但是当我这样做的时候，我仍然会得到应该包装它的错误。

我的目标是呈现Layout组件和几个子组件，并让浏览器中的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'));

您不应该像这样将组件字符串化以服务于客户端。你应该重新渲染你的应用程序。需要字符串化的应该是原始数据，如{id: 1, name: 'limelights'}。

在服务器上

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

和客户端

var data = JSON.parse(window.PROPS.data);
React.render(<Layout {...data} />, document.body);
使用同构应用程序的关键在于，相同的代码可以同时在服务器和客户机上运行。

我的答案是，我做事情的理论错误的方式。

有服务器渲染像<Layout {...data} ><Comp1 /></Layout>将工作。然而，当浏览器启动时，它将没有子道具，您将失去Comp1。然后，我试着把孩子们当作道具，就像我问题中的例子。真正的方法是让服务器执行<Layout {...data} ></Layout>。

答案的真正关键是Layout的render方法应该直接放置孩子。我可以在渲染中使用状态(或道具，仍然在计算语义差异)来确定子元素是否应该不同。

相关文章：