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

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

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

score 3 · Accepted Answer

React 将通过比较初始客户端渲染和服务器渲染标记中的校验和属性之间的校验和来检查存在的任何初始标记是否与客户端上的第一次渲染生成的内容相匹配，因此您必须使相同的道具可用于初始渲染客户端以重用标记。

一种常见的方法是将 props 序列化为 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')

score 0 · Accepted Answer

通过将其作为道具传递给 Admin 组件，就像您this.props.field1使用传递给 MaterialTextfield一样<Admin field1="Hallo" />

2 回答 2