[英]react.js: removing a component
I'm fairly new at react.js, so any help is greatly appreciated.我是 react.js 的新手,所以非常感谢任何帮助。
I have this: https://jsfiddle.net/rzjyhf91/我有这个: https : //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 unmountComponentAtNode
for that, but it does not work:目标是通过单击按钮删除图像,
unmountComponentAtNode
我使用了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?如何从另一个组件中删除反应组件?
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.
React 是关于隔离组件的,因此,您不应该卸载由父组件安装的组件。 Instead, you should use a callback passed down through
props
to accomplish something like that.相反,您应该使用通过
props
传递的回调来完成类似的事情。
Your actual implementation will depend on your use case, but an updated version of your example that works is at: https://jsfiddle.net/nt99zzmp/1/您的实际实现将取决于您的用例,但您的示例的更新版本位于: 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);
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 state
or a route
to 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
或route
来管理您的组件来处理这些事情,删除元素或组件例如,在 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 props
or 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>;
}
}
});
////
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>);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.