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

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

将其作为道具传递给 Admin 组件，就像您使用 <Admin field1="Hallo" />

将 this.props.field1 传递给 MaterialTextfield 一样

Answer 2

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

Clientside react-script overrides serverside rendered props