javascript - logo - Desmontando el nodo React.js

react js vs angular

Question

Estoy tratando de desmontar un nodo this._rootNodeID con this._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

Pero devuelve false .

El handleClick se handleClick cuando hago clic en un elemento y debo desmontar el nodo raíz. Documentación en unmountComponentAtNode here

Lo he intentado también:

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

Ese selector funciona con jQuery.hide() , pero no con desmontarlo, mientras que la documentación indica que debe ser un elemento DOMElement , como lo que usaría para React.renderComponent

Después de algunas pruebas más, resulta que funciona en algunos elementos / selectores.

De alguna manera funciona con el selector: document.getElementById(''maindiv'') , donde maindiv es un elemento no generado con React.js, y simplemente html. Entonces vuelve true .

Pero tan pronto como intento y selecciono un ElementById diferente que se genera con React.js, devuelve falso. Y tampoco funcionará con document.body , aunque esencialmente devuelven lo mismo si console.log ( getElementsByClassName(''bla'')[0] tampoco funciona)

Debería haber una manera simple de seleccionar el nodo a través de this , sin tener que recurrir a jQuery u otros selectores, sé que está ahí en alguna parte ...

Answer 1

Como se menciona en github.com/facebook/react/issues/1044 , si desea acceder al nodo DOM de un componente, puede usar this.getDOMNode() . Sin embargo, un componente no puede desmontarse. Vea la respuesta de Michael para la forma correcta de hacerlo.

Answer 2

Desmonte los componentes del mismo elemento DOM en el que los monta. Entonces, si hizo algo como:

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

Entonces lo desmontarías con:

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

Aquí hay un JSFiddle simple donde montamos el componente y luego lo desmontamos después de 3 segundos.

Answer 3

El ejemplo que uso:

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

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

Answer 4

Esto funcionó para mí. Es posible que desee tomar precauciones adicionales si findDOMNode devuelve null.

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

Answer 5

No es necesario que desmonte el componente, la solución simple es cambiar el estado y representar un div vacío

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>
  }
});

Answer 6

Primero, soy nuevo en reaccionar también. Por supuesto, podemos controlar el Componente todo al cambiar el estado , pero cuando lo intento y lo pruebo, lo consigo, el React.unmountComponentAtNode(parentNode) solo puede desmontar el componente que es renderizado por React.render(<SubComponent>,parentNode) . Por lo tanto, <SubComponent> para eliminar debe ser invocado por el método React.render() , así que escribo el código

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

Ejecute el código de ejemplo en jsFiddle y pruébelo.

Nota: en el código de ejemplo React.findDOMNode se reemplaza por getDOMNode como el problema de versión de reactjs.