Клиентские реагировать-скрипт переопределяет сервере, оказываемых реквизит

В моем серверном рендеринге react я передаю свойство 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')
);

Проблема в том, что из-за того, что отрисованные накладки не совпадают, значение текстового поля теряется. Как я могу это исправить?

2 2
javascript reactjs isomorphic-javascript

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

, передав его в качестве опоры для администратора компонента просто, как вы проходите this.props.field1 в MaterialTextfield через <Admin field1="Hallo" />

0