react.js：删除一个组件

Question

我是React.js的新手，因此非常感谢您的帮助。

我有这个：http :
//jsfiddle.net/rzjyhf91/

其中我做了两部分：图像和按钮。

目的是通过单击按钮来删除图像，我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);

如何从另一个组件中删除反应组件？

Answer 1

好吧，看来您应该重新考虑显示控件的处理方式。React只是关于孤立的组件，因此，您不应该卸载由父组件安装的组件。相反，您应该使用向下传递的回调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);