Javascript react.js：删除一个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27227792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react.js: removing a component
提问by Rutger
I'm fairly new at react.js, so any help is greatly appreciated.
我是 react.js 的新手，所以非常感谢任何帮助。
I have this: http://jsfiddle.net/rzjyhf91/
我有这个：http: //jsfiddle.net/rzjyhf91/
Wherein I have made 2 components: an image and a button.
其中我制作了 2 个组件：一个图像和一个按钮。
The goal is to remove the image with a click of the button, I use unmountComponentAtNodefor that, but it does not work:
目标是通过单击按钮删除图像，我使用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);
How can I remove a react component from another component?
如何从另一个组件中删除反应组件？
回答by BBonifield
Well, it seems you should rethink how the display control is handled. React is all about isolated components, and so, you shouldn't be unmounting a component that is mounted by a parent component. Instead, you should use a callback passed down through propsto accomplish something like that.
好吧，看来您应该重新考虑如何处理显示控件。React 是关于隔离组件的，因此，您不应该卸载由父组件安装的组件。相反，您应该使用传递下来的回调props来完成类似的事情。
Your actual implementation will depend on your use case, but an updated version of your example that works is at: http://jsfiddle.net/nt99zzmp/1/
您的实际实现将取决于您的用例，但您的示例的更新版本位于：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);
回答by Alireza
Basically removing a component doesn't make sense in React, you probably still thinking jQuery ways, basically in all modern and new JavaScript libraries including React, you should manage your component using stateor a routeto handle these things, deleting an element or component is not a good way to do these things in React or Angular for example.
基本上在React 中删除组件没有意义，您可能仍在思考 jQuery 方式，基本上在所有现代和新的 JavaScript 库中，包括 React，您应该使用state或 aroute来管理您的组件来处理这些事情，删除元素或组件不是例如，在 React 或 Angular 中做这些事情的好方法。
For example you can have a boolean in this case and if it's true, show your image, otherwise hide it, or even return a different element in your component.
例如，在这种情况下你可以有一个布尔值，如果它是真的，显示你的图像，否则隐藏它，甚至在你的组件中返回一个不同的元素。
So in this case, you have a component which will return differently depends on propsor state... something like this:
所以在这种情况下，你有一个组件会以不同的方式返回取决于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>;
}
}
});
////
回答by webjay
In this example, if you set this.state.render = false, the component will be removed from DOM:
在这个例子中，如果你设置了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>);
}
