Как я могу reset реагировать на компонент, включающий все транзитно достижимые состояния?

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

React предоставляет метод setState, который позволяет устанавливать собственное явное состояние компонентов, но исключает неявное состояние, такое как фокус браузера и состояние формы, а также исключает состояние его дочерних элементов. Поймать все это непрямое состояние может быть сложной задачей, и я предпочел бы решить ее строго и полностью, а не играть в удар с каждым новым удивительным состоянием.

Есть ли API или шаблон для этого?

Редактировать: Я сделал тривиальный пример, демонстрирующий подход this.replaceState(this.getInitialState()) и противопоставляющий его подходу this.setState(this.getInitialState()): jsfiddle - replaceState является более надежным.

Ответ 1

Чтобы гарантировать, что неявное состояние браузера, о котором вы упомянули, и состояние дочерних элементов сброшено, вы можете добавить key атрибут к компоненту корневого уровня, возвращаемому render; когда он изменяется, этот компонент будет выброшен и создан с нуля.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Там нет ярлыка для сброса локального состояния отдельных компонентов.

Ответ 2

На самом деле вы должны избегать replaceState и использовать setState.

Документы говорят, что replaceState "может быть полностью удалено в будущей версии React." Я думаю, что это определенно будет удалено, потому что replaceState действительно не преуспевает в философии React. Это облегчает создание компонента React, который начинает чувствовать себя любопытным швейцарским ножом-y. Это устраняет естественный рост компонента Реагента, становясь меньшим и более целенаправленным.

В React, если вам нужно ошибаться в обобщении или специализации: нацелитесь на специализацию. В качестве следствия, дерево состояний для вашего компонента должно иметь определенную сущность (это прекрасно, чтобы со вкусом нарушить это правило, если вы вытаскиваете новый продукт для маркировки).

Во всяком случае, так вы это делаете. Как и Бен (принято), ответьте выше, но вот так:

this.setState(this.getInitialState());

Также (как сказал Бен), чтобы reset "состояние браузера" вам нужно удалить DOM node. Используйте силу vdom и используйте новый key prop для этого компонента. Новый рендер заменит этот компонент оптовой.

Ссылка: https://facebook.github.io/react/docs/component-api.html#replacestate

Ответ 3

Добавление key атрибута к элементу, который необходимо переинициализировать, будет перезагружать его каждый раз, когда props или state связаны с изменением элемента.

ключ = {новая дата(). getTime()}

Вот пример:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}