react.js: rimozione di un componente

Question

Sono abbastanza nuovo a react.js, quindi qualsiasi aiuto è molto apprezzato.

ho questo: http://jsfiddle.net/rzjyhf91/

in che cosa ho fatto 2 componenti: un immagine e un pulsante.

L'obiettivo è quello di rimuovere l'immagine con un clic del tasto, io uso unmountComponentAtNode per questo, ma non funziona:

var App = React.createClass({ 
    render: function() { 
    return (
    <div><MyImage /><RemoveImageButton /></div> 
    ); 
    } 
}); 

var MyImage = React.createClass({ 
    render: function() { 
    return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } 
}); 

var RemoveImageButton = React.createClass ({ 
    render: function() { 
    return (
     <button onClick={this.handleClick}>remove image</button> 
    ) 
    }, 
    handleClick: function(){ 
    React.unmountComponentAtNode(document.getElementById('kitten')); 
    } 
}); 

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

Come posso rimuovere un componente dalla reagire un altro componente?

Answer 1

Bene, sembra che si debba riconsiderare come viene gestito il controllo del display. React è interamente basato su componenti isolati e pertanto non dovresti smontare un componente montato da un componente principale. Invece, dovresti usare una richiamata passata attraverso props per ottenere qualcosa del genere.

L'implementazione effettiva dipende dal vostro caso d'uso, ma una versione aggiornata del vostro esempio che funziona e ': http://jsfiddle.net/nt99zzmp/1/

var App = React.createClass({ 
    render: function() { 
    var img = this.state.showImage ? <MyImage /> : ''; 
    return (
    <div>{img}<RemoveImageButton clickHandler={this.removeImage} /></div> 
    ); 
    }, 

    getInitialState: function() { 
     return { 
      showImage: true 
     }; 
    }, 

    removeImage: function() { 
     this.setState({ showImage: false }); 
    } 
}); 

var MyImage = React.createClass({ 
    render: function() { 
    return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } 
}); 

var RemoveImageButton = React.createClass ({ 
    render: function() { 
    return (
     <button onClick={this.props.clickHandler}>remove image</button> 
    ) 
    } 
}); 

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

Answer 2

In sostanza la rimozione di un componente non ha senso in Reagire, probabilmente ancora pensando modi jQuery, fondamentalmente in tutte le librerie JavaScript moderne e nuove incluso React, dovresti gestire il tuo componente usando state o un route per gestire queste cose, eliminare un elemento o componente non è un buon modo per fare queste cose in React o Angular per esempio.

Ad esempio è possibile avere un valore booleano in questo caso e se è vero, mostrare l'immagine, altrimenti nasconderlo o restituire un elemento diverso nel componente.

Quindi, in questo caso, si ha un componente che restituirà in modo diverso dipende props o state ... qualcosa di simile:

//// 
var MyImage = React.createClass({ 
    render: function() { 
    if(this.state.showImage) { 
     return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } else { 
     return<p>no image!</p>; 
    } 
    } 
}); 
////