Response.js: удаление компонента

Я новичок в response.js, поэтому любая помощь очень ценится.

У меня есть это: http://jsfiddle.net/rzjyhf91/

В котором я создал 2 компонента: изображение и кнопку.

Цель состоит в том, чтобы удалить изображение одним нажатием кнопки, для этого я использую unmountComponentAtNode, но он не работает:

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

Как удалить компонент реакции из другого компонента?

Ответ 1

Ну, похоже, вам нужно переосмыслить, как обрабатывается управление дисплеем. Реагирование - это все изолированные компоненты, и поэтому вы не должны размонтировать компонент, который монтируется родительским компонентом. Вместо этого вы должны использовать обратный вызов, переданный через props, чтобы выполнить что-то подобное.

Ваша фактическая реализация будет зависеть от вашего варианта использования, но обновленная версия вашего примера, которая работает, находится по адресу: 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

В основном устранение компонента не имеет смысла в React, вы, вероятно, все еще думаете о способах jQuery, в основном во всех современных и новых библиотеках JavaScript, включая React, вы должны управлять своим компонентом с помощью state или route для обработки этих вещи, удаляющие элемент или компонент, не являются хорошим способом сделать это в React или Angular, например.

Например, вы можете иметь логическое значение в этом случае, и если оно истинно, покажите свое изображение, иначе скройте его или даже верните другой элемент в свой компонент.

Итак, в этом случае у вас есть компонент, который будет возвращаться по-разному, зависит от props или state... что-то вроде этого:

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