react.js：删除组件答案

【问题标题】：react.js: removing a componentreact.js：删除组件
【发布时间】：2014-12-01 11:49:33
【问题描述】：

我是 react.js 的新手，非常感谢任何帮助。

其中我制作了 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);

如何从另一个组件中移除一个 React 组件？

【问题讨论】：

哇，这似乎是一个错误......你应该这样做：

然后在“someid”上卸载......但这也不起作用。我认为您必须强制更新（） App 组件或其他东西......
我不知道答案，但我会将图像设置为App 的状态，然后更改/删除触发重新渲染的状态值。

标签： javascript reactjs

【解决方案1】：

好吧，看来您应该重新考虑如何处理显示控件。 React 是关于隔离组件的，因此，您不应该卸载由父组件安装的组件。相反，您应该使用通过props 向下传递的回调来完成类似的事情。

您的实际实施将取决于您的用例，但您的示例的更新版本位于：https://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>;
    }
  }
});
////

【讨论】：

【解决方案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>);
  }

【讨论】：