Как правильно сделать размонтирование элемента (блока) в react.js?

Question

[LB777]

В документации сказано, что componentWillUnmount запускается перед размонтирование элемента из DOM. Но как сделать размонтирование элента?
Говоря попросту мне надо один элемент заменить другим, которые привязаны к одному id или просто удалить элемент.
Как грамотно это сделать, что бы запускался componentWillUnmount у элемента, который удаляется из DOM?

Comments

[Андрей Антропов]

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

[LB777]

Андрей Антропов: Мне как раз надо отписаться от слушателя. И как я понял, что componentWillUnmount сработает когда объект, скажем var FluxCart = React.createClass({...}), будет размонтирован из DOM. Соответственно вопрос заключается в том как размонтировать (удалить) из DOM.

[whats]

Сделать так что бы компонент не монтировался. Или тут что то супер сложное есть ? При каждом сетСтейте реакт обновляет все дерево компонентов ниже. Сделать сет стейт, передать пропс который укажет на то что бы мы не рендерели компонент

Answer 1

[123 123]

Не рендерить компонент, тогда React уберет его из DOM.

render() {
  let component = true ? <Comp1 /> : <Comp2 />;
  return (
    <div>{component}</div>
  );
}

Comments

[LB777]

В принципе понятно, только что значит let перед component ?

[123 123]

Синтаксис ES6 ariya.ofilabs.com/2013/05/es6-and-block-scope.html

[LB777]

Роман Лютиков: Понял, спасибо ;)

Answer 2

[Андрей Антропов]

LB777: Например это может выглядеть так

var FluxCart = React.createClass({...})

var App = React.createClass({
  render : function () {
    var component = this.state.conditionToRenderCart ? <FluxCart /> : null;
    return (
      <div>
       {component}
      </div>
    )
  }
})

В таком случае когда состояние изменится и компонент не будет отрендрен реакт вызовет событие componentWillUnmount

Answer 3

[PQR]

Допустим сначала вы создали компонент и отрендрили его на странице так:

React.render(<MyComponent />, document.getElementById('container'));

Позже, вы можете удалить его из DOM дерева, плюс React сам почистит все обработчики событий так:

React.unmountComponentAtNode(document.getElementById('container'));

facebook.github.io/react/docs/top-level-api.html#r...