ReactJs: Как передать исходное состояние при рендеринге компонента?

Я знаю, что могу передать props при рендеринге компонента. Я также знаю метод getInitialState. Но проблема в том, что getInitialState не очень помогает, потому что мой компонент не знает его начального состояния. Я делаю. Поэтому я хочу передать его, пока я его показываю.

Что-то вроде этого (псевдокод):

React.render(<Component initialState={...} />);

Я знаю, что я мог бы использовать prop для работы в качестве исходного состояния, но это пахнет анти-шаблоном.

Что мне делать?

EDIT FOR CLARITY

Представьте, что у меня есть компонент CommentList. К тому моменту, когда я впервые его создала, начальное состояние соответствует снимку текущих комментариев из моей базы данных. Поскольку пользователь включает комментарии, этот список изменится, и поэтому он должен быть state, а не props. Теперь, чтобы отобразить исходный снимок комментариев, я должен передать его компоненту CommentsList, потому что он не имеет возможности это знать. Моя путаница в том, что единственный способ, которым я вижу эту информацию, - через props, который кажется анти-шаблоном.

ОТВЕТЫ

Ответ 1

Только постоянные компоненты могут использовать реквизиты в getInitialState. Реквизит в getInitialState является анти-шаблоном, если ваша цель - синхронизация. getInitialState вызывается только тогда, когда компонент сначала создается, поэтому он может вызвать некоторые ошибки, потому что источник истины не уникален. Отметьте этот ответ.

Цитата:

Использование реквизита, переданного из родителя, для создания состояния в getInitialState часто приводит к дублированию "источника истины", т.е. где реальные данные. Когда это возможно, вычисляйте значения на лету чтобы они не выходили из синхронизации позже и вызывают проблемы с обслуживанием

Вы все еще можете сделать:

getInitialState: function() {
   return {foo: this.props.foo}
}

Как они будут реквизитами по умолчанию для вашего приложения. Но пока вы используете prop для установки значения, которое, по-видимому, не изменится, вы можете использовать ту же самую поддержку внутри функции render.

<span>{this.props.foo}</span>

Этот реквизит не будет изменен, поэтому при каждом вызове render нет проблем с его использованием.

Отредактированный ответ:

В этом случае ваше начальное состояние не должно быть опорой, должно быть ajax-вызовом, который заполняет список комментариев.

Ответ 2

Чтобы процитировать документ React:

Использование реквизита, переданного из родителя, для генерации состояния в getInitialState часто приводит к дублированию "источника истины", то есть к реальным данным. Когда это возможно, вычисляйте значения "на лету", чтобы убедиться, что они не выйдут из синхронизации позже и не вызвали проблемы обслуживания.

и

Однако он не анти-шаблон, если вы даете понять, что синхронизация не цели здесь

Итак, если ваши реквизиты включают value и initialValue, тогда ясно, что последний для инициализации, и нет путаницы.

Смотрите примеры React docs для примеров кода.

Ответ 3

Если вы знаете состояние, я бы склонен утверждать, что компонент, который вы оказываете, на самом деле не контролирует его. Идея в Реагте состоит в том, что любое частное государство живет только в одном месте.

Ответ 4

После просмотра других ответов и изучения немного об этом, я пришел к такому выводу:

Если вы выполняете рендеринг в клиенте (скомпилированный или нет), который используется по умолчанию, вы должны попытаться сделать дополнительный вызов Ajax внутри вашего компонента, чтобы получить начальное состояние. То есть, не используйте props. Это чище и менее подвержено ошибкам.

Однако, если вы выполняете рендеринг на сервере (Node.js или ReactJs.NET), нет никаких причин для этого дополнительного вызова Ajax для каждого запроса. Кроме того, это не SEO дружественный. Вы хотите, чтобы вся страница появилась в результате вашего запроса (включая данные). Итак, как отметил @RandyMorris, в этом случае нормально использовать реквизиты в качестве исходного состояния, если только это только начальное состояние. То есть, никакой синхронизации.