react.js: enlever un composant

Je suis assez nouveau à react.js, de sorte que toute aide est grandement appréciée.

J'ai ceci: http://jsfiddle.net/rzjyhf91/

Où j'ai fait les 2 composantes: une image et un bouton.

Le but est d'enlever l'image avec un clic de bouton, j'utilise unmountComponentAtNode pour ça, mais ça ne fonctionne pas:

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

Comment puis-je supprimer une réagir composant à partir d'un autre composant?

source d'informationauteur Rutger van Waveren

  1. 30

    Bien, il semble que vous devriez repenser la façon dont le contrôle de l'affichage est géré. Réagir est tout au sujet de composants isolés, et donc, vous ne devriez pas être le démontage d'un composant qui est monté par un composant parent. Au lieu de cela, vous devez utiliser un callback passé par props pour accomplir quelque chose comme ça.

    Réelle de la mise en œuvre dépend de votre cas d'utilisation, mais une version mise à jour de votre exemple qui fonctionne est: 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);
  2. 2

    Essentiellement de retirer un composant n'a pas de sens à Réagir, vous avez probablement encore de la pensée jQuery façons, dans tous les modernes et de nouvelles bibliothèques JavaScript, y compris Réagir, vous devez gérer votre composant à l'aide de state ou un route gérer ces choses, la suppression d'un élément ou composant n'est pas une bonne façon de faire ces choses dans la réaction ou Angulaire, par exemple.

    Par exemple, vous pouvez avoir un booléen dans ce cas, et si c'est vrai, montrer votre image, sinon le cacher, ou même de retourner un autre élément de votre composant.

    react.js: enlever un composant

    Donc dans ce cas, vous disposez d'un composant qui sera de retour différemment dépend props ou state... quelque chose comme ceci:

    ////
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>;
    }
  }
});
////
  3. 0

    Dans cet exemple, si vous définissez this.state.render = falsele composant sera supprimé à partir DOM:

      render() {
    const { render } = this.state;
    if (render === false) return null;
    return (<p>I am here as long as render isn't false</p>);
  }