Javascript 如何处理同构的子组件？

我有如下服务器代码：

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

我的客户代码如下：

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

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

var React=require（'React'），
布局=要求（'./组件/布局'）；
React.render（，document.getElementById（'content'））；

你不应该为了服务于你的客户而把你的组件串起来。您应该重新呈现应用程序。要字符串化的内容应该只是原始数据，比如

{id:1，name:'limelights'}

在服务器上

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

React.renderToString（）；

在客户身上

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

var data=JSON.parse（window.PROPS.data）；
React.render（，document.body）；

---

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

您不应该为了服务于客户端而对组件进行字符串化。您应该重新呈现应用程序。要字符串化的内容应该只是原始数据，比如

{id:1，name:'limelights'}

在服务器上

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

React.renderToString（）；

在客户身上

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

var data=JSON.parse（window.PROPS.data）；
React.render（，document.body）；

---

使用同构应用程序的意义在于，相同的代码同时在服务器和客户端上运行。

答案是，我在理论上做的事情是错误的

让服务器像

那样渲染将起作用。但是，当浏览器启动时，它将没有子道具，您将丢失

Comp1

。然后我试着像我问题中的例子一样，把孩子们当作道具带进来。真正的方法是让服务器执行

---

答案的真正关键是

render

的

Layout

方法应该直接放置子对象。我可以在render中使用状态（或道具，仍在计算语义差异）来确定孩子们是否应该有所不同。

答案是我的做法在理论上是错误的

让服务器像

那样渲染将起作用。但是，当浏览器启动时，它将没有子道具，您将丢失

Comp1

。然后我试着像我问题中的例子一样，把孩子们当作道具带进来。真正的方法是让服务器执行

---

答案的真正关键是

render

的

Layout

方法应该直接放置子对象。我可以在render中使用state（或props，仍在计算语义差异）来确定子对象是否应该不同。

您的数据继承了许多子对象/字符串+标记标记，您应该将它们全部字符串化together@syarul当我把它们串在一起，孩子们被编码了，所以我在页面上看到了div，而不是标记。如果数据继承了很多子对象/字符串+标记标记，那么应该将它们全部字符串化together@syarul当我把它们串在一起，孩子们被编码了，所以我在页面上看到了div，而不是标记。你是说，对于这些孩子，我应该在服务器和客户端上写下

？我想我可以在服务器上指定子对象&避免在clientAlso PROPS上重新键入它们。数据已经是一个对象，因此不需要解析。标记的布局很有趣，因此如果我将字符串化放在引号中或不放在引号中，很容易被忽略：）那么你是说在这些孩子的情况下，我应该在服务器和客户机上编写

？我想我可以在服务器上指定子对象&避免在clientAlso PROPS上重新键入它们。数据已经是一个对象，因此不需要解析。标记的布局很有趣，因此如果我将字符串化放在引号中或不放在引号中，很容易忽略：）