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.