Размонтирование React.js node

Я пытаюсь отключить React.js node с помощью this._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

Но он возвращает false.

handleClick запускается, когда я нажимаю на элемент, и должен размонтировать root- node. Документация на unmountComponentAtNode здесь

Я тоже пробовал это:

React.unmountComponentAtNode($ ( '* [данных reactid = "' + this._rootNodeID +" ]') [0])

Этот селектор работает с jQuery.hide(), но не с его размонтированием, а в документации указано, что он должен быть DOMElement, как вы бы использовали для React.renderComponent

После нескольких тестов выясняется, что он работает с некоторыми элементами/селекторами.

Как-то работает с селектором: document.getElementById('maindiv'), где maindiv - это элемент, не сгенерированный с помощью React.js, и просто простой html. Затем он возвращает true.

Но как только я попытаюсь выбрать другой ElementById, который генерируется с помощью React.js, он возвращает false. И он не будет работать с document.body, хотя они все по сути возвращают одно и то же, если я console.log их (getElementsByClassName('bla')[0] также не работает)

Должен быть простой способ выбрать node через this, не прибегая к jQuery или другим селекторам, я знаю его где-то там.

Ответ 1

Отключите компоненты из того же элемента DOM, в который вы их монтируете. Поэтому, если вы сделали что-то вроде:

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

Затем вы должны размонтировать его с помощью:

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

Вот простой JSFiddle, где мы монтируем компонент, а затем размонтируем его через 3 секунды.

Ответ 2

Это сработало для меня. Вы можете принять дополнительные меры предосторожности, если findDOMNode возвращает значение null.

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

Ответ 3

Пример, который я использую:

unmount: function() {
  var node = this.getDOMNode();
  React.unmountComponentAtNode(node);
  $(node).remove();
},

handleClick: function() {
  this.unmount();
}

Ответ 4

Вам не нужно размонтировать компонент, простое решение, которое оно изменит, и отобразить пустой div

const AlertMessages = React.createClass({
  getInitialState() {
    return {
      alertVisible: true
    };
  },
  handleAlertDismiss() {
    this.setState({alertVisible: false});
  },
  render() {
    if (this.state.alertVisible) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Oh snap! You got an error!</h4>
        </Alert>
      );
    }
    return <div></div>
  }
});

Ответ 5

Как указано в проблеме GitHub, которую вы подали, если вы хотите получить доступ к компоненту DOM node, вы можете использовать this.getDOMNode(). Однако компонент не может размонтировать себя. См. Ответ Майкла за правильный способ сделать это.

Ответ 6

Во-первых, я новичок в реакции. Конечно, мы можем управлять компонентом all, переключая состояние , но по мере того, как я пытаюсь проверить, я понимаю, что React.unmountComponentAtNode(parentNode) может только размонтировать компонент, который отображается React.render(<SubComponent>,parentNode). Поэтому <SubComponent>, который нужно удалить, должен быть добавлен методом React.render(), поэтому я пишу код

<script type="text/jsx">

    var SubComponent = React.createClass({
        render:function(){
            return (
                    <div><h1>SubComponent to be unmouned</h1></div>
            );
        },
        componentWillMount:function(){
            console.log("componentWillMount");
        },
        componentDidMount:function(){
            console.log("componentDidMount");
        },
        componentWillUnmount:function(){
            console.log("componentWillUnmount");
        }

    });

    var App = React.createClass({

        unmountSubComponent:function(){
            var node = React.findDOMNode(this.subCom);
            var container = node.parentNode;
            React.unmountComponentAtNode(container);
            container.parentNode.removeChild(container)
        },

        componentDidMount:function(){
            var el = React.findDOMNode(this)
            var container = el.querySelector('.container');
            this.subCom = React.render(<SubComponent/> ,  container);
        },

        render:function(){

            return (
                <div className="app">
                    <div className="container"></div>
                    <button onClick={this.unmountSubComponent}>Unmount</button>
                </div>
            )
        }
    });

    React.render(<App/> , document.body);
</script>

Запустите код примера jsFiddle и попробуйте.

Примечание: в образце код React.findDOMNode заменяется на getDOMNode как на проблему с реакцией.