Javascript 客户端反应脚本覆盖服务器端呈现的道具

在我的服务器端react呈现中，我向JSX传递一个属性：

markup: React.renderToString(Admin({ field1: "Hallo" }))

JSX如下所示：

 <MaterialTextField hintText="field1" floatingLabelText="field1" type="text" name="field1" value={this.props.field1} />

现在，我还需要在clientside上呈现JSX，以获得事件侦听器，等等：

React.render(
    <Admin />,
    document.getElementById('react-app')
);

React.render(
,
document.getElementById（'react-app'）
);

---

问题是：由于呈现的标记不同，文本字段的值会丢失。如何修复此问题？

将其作为道具传递给管理组件，就像您将

this.props.field1

传递给MaterialTextfield一样，使用

React将通过比较初始客户端呈现和属性之间的校验和，检查是否存在任何初始标记与客户端上第一次呈现时生成的标记匹配服务器呈现的标记中的checksum属性，因此必须为客户端上的初始呈现提供相同的道具，以便重用标记

一种常见的方法是将道具序列化为JSON，以便在发送给客户端的初始HTML中轻松地将其作为变量包含：

res.render('react.jade', {
  markup: React.renderToString(React.createElement(MyComponent, props)),
  props: JSON.stringify(props)
})


但我不想在JavaScript中再次将其作为道具传递。在我看来，这将是非常糟糕的，因为我必须在Node.js和JavaScript-Code中获取prop的值。如果您想重用来自服务器的初始标记，则必须传递相同的prop。
body
  div#app
    != markup
  script window.INITIAL_PROPS = !{props}
  script(src='/js/app.js')