客户端反应脚本覆盖服务器端渲染道具

Question

在我的服务器端反应渲染中，我将属性传递给JSX：

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

JSX看起来像这样：

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

现在，我也想在客户端上呈现JSX以获得事件监听器等：

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

问题是：由于渲染的标记不相同，因此文本字段的值会丢失。我怎么能解决这个问题？

Answer 1

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

执行此操作的常用方法是将道具序列化为JSON，以便它们可以轻松地作为变量包含在发送给客户端的初始HTML中：

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

...

body
  div#app
    != markup
  script window.INITIAL_PROPS = !{props}
  script(src='/js/app.js')

Answer 2

将使用this.props.field1

将<Admin field1="Hallo" />传递给MaterialTextfield时，将其作为道具传递给Admin组件