web-dev-qa-db-fra.com

Démontage du noeud React.js

J'essaie de démonter un nœud React.js avec this._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

Mais il retourne false.

La handleClick est déclenchée lorsque je clique sur un élément et doit démonter le nœud racine. Documentation sur unmountComponentAtNodeici

J'ai aussi essayé ça:

React.unmountComponentAtNode ($ ('* [data-reactid = "' + this._rootNodeID + '"]') [0])

Ce sélecteur fonctionne avec jQuery.hide(), mais pas avec son démontage, alors que la documentation indique que ce devrait être un DOMElement, comme vous le feriez pour React.renderComponent

Après quelques tests supplémentaires, il s'avère que cela fonctionne sur des éléments /sélecteurs.

Cela fonctionne en quelque sorte avec le sélecteur: document.getElementById('maindiv'), où maindiv est un élément non généré avec React.js, et simplement du langage HTML. Ensuite, il retourne true.

Mais dès que j'essaie de sélectionner un autre ElementById généré avec React.js, il renvoie false. Et cela ne fonctionnera pas non plus avec document.body, Bien qu'ils renvoient tous essentiellement la même chose si je les console.log (getElementsByClassName('bla')[0] ne fonctionne pas non plus)

Il devrait exister un moyen simple de sélectionner le nœud via this, sans avoir à recourir à jQuery ou à d'autres sélecteurs, je sais que cela se trouve quelque part ..

javascriptreactjs
47
TrySpace

Démontez les composants du même élément DOM que celui dans lequel vous les avez montés. Donc, si vous avez fait quelque chose comme:

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

Ensuite, vous le démonteriez avec:

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

Voici n simple JSFiddle où nous montons le composant et le démontons au bout de 3 secondes.

76
Michael LaCroix

Cela a fonctionné pour moi. Vous voudrez peut-être prendre des précautions supplémentaires si findDOMNode renvoie null.

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

L'exemple que j'utilise:

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

handleClick: function() {
  this.unmount();
}
6
Danil Pismenny

Vous n'avez pas besoin de démonter le composant la solution simple, il est de changer l'état et de rendre un div vide

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>
  }
});
2
miguel savignano

Comme indiqué dans le le problème GitHub que vous avez déposé , si vous souhaitez accéder au nœud DOM d'un composant, vous pouvez utiliser this.getDOMNode(). Cependant, un composant ne peut pas se démonter. Voir la réponse de Michael pour la bonne façon de le faire.

1
Paul O'Shannessy

Premièrement, je suis nouveau pour réagir aussi. Bien sûr, nous pouvons contrôler le composant tout en commutant l’état , mais lorsque j’essaie de tester, j’obtiens cela, la React.unmountComponentAtNode(parentNode) ne peut démonter que le composant rendu par React.render(<SubComponent>,parentNode). Donc, <SubComponent> À supprimer doit être ajouté par la méthode React.render(), alors j'écris le code

<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>

Exécutez l'exemple de code dans jsFiddle et essayez-le.

Remarque: dans l'exemple de code, React.findDOMNode Est remplacé par getDOMNode comme problème de version de reactjs.

0
monjer