javascript - event - react helmet sync

react.js: eliminando un componente

Question

Soy bastante nuevo en reaccion.js, por lo que cualquier ayuda es muy apreciada.

Tengo esto: http://jsfiddle.net/rzjyhf91/

Donde he realizado 2 componentes: una imagen y un botón.

El objetivo es eliminar la imagen con un clic del botón, yo uso unmountComponentAtNode para eso, pero no funciona:

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

¿Cómo puedo eliminar un componente de reacción de otro componente?

Answer 1

Básicamente, eliminar un componente no tiene sentido en React , es probable que aún piense en formas de jQuery, básicamente en todas las bibliotecas de JavaScript nuevas y modernas, incluyendo React, debe administrar su componente utilizando el state o una route para manejar estas cosas, eliminando un elemento o componente No es una buena manera de hacer estas cosas en Reacción o Angular, por ejemplo.

Por ejemplo, puede tener un booleano en este caso y, si es cierto, mostrar su imagen, esconderla o devolver un elemento diferente en su componente.

Entonces, en este caso, tienes un componente que regresará de manera diferente dependiendo de los props o el state ... algo como esto:

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

Answer 2

Bueno, parece que deberías repensar cómo se maneja el control de pantalla. React tiene que ver con componentes aislados, por lo que no debe desmontar un componente montado por un componente principal. En su lugar, debe usar una devolución de llamada que se transmite a través de los props para lograr algo así.

Su implementación real dependerá de su caso de uso, pero una versión actualizada de su ejemplo que funciona está en: 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 3

En este ejemplo, si establece this.state.render = false , el componente se eliminará de DOM:

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