react.js:删除组件

Question

我在react.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);

如何从其他组件中删除反应组件？

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

Answer 2

基本上在React 中删除组件没有意义，您可能仍在考虑 jQuery 方式，基本上在所有现代和新的 JavaScript 库中，包括 React，您应该使用state或 aroute来管理您的组件来处理这些事情，删除元素或组件不是例如，在 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>;
    }
  }
});
////

Answer 3

在这个例子中，如果你设置了this.state.render = false，组件将从 DOM 中移除：

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