Javascript 组件如何从 DOM 中移除/删除自身？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35994313/
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
How component can remove/delete itself from DOM?
提问by balazswmann
Let's say I have a following JSX code:
假设我有以下 JSX 代码：
var List = React.createClass({
render: function() {
var Items = this.props.data.map(function(item) {
return (
<Item key={item.id}>
{item.text}
</Item>
);
});
return (
<div className="items">
{Items}
</div>
);
}
});
var Item = React.createClass({
handleDelete: function(e) {
e.preventDefault();
// Delete this (only this) component completely (remove it from DOM).
},
render: function() {
return (
<div className="item">
{this.props.children}
<button className="delete" onClick={this.handleDelete}>Delete</button>
</div>
);
}
});
ReactDOM.render(
<List data={Array of items} />,
document.getElementById('content')
);
My question is: how items can completely remove/delete themselves in their own handleDelete() function?
我的问题是：项目如何在自己的 handleDelete() 函数中完全删除/删除自己？
采纳答案by Calvin Belden
One solution would be to have the container component (ie List) handle the onDeletefunctionality, and then update its state (keep track of deleted items). Then in your List's render()function, you can filter out any deleted items:
一种解决方案是让容器组件（即List）处理onDelete功能，然后更新其状态（跟踪已删除的项目）。然后在您List的render()函数中，您可以过滤掉任何已删除的项目：
var List = React.createClass({
getInitialState: function () {
return { deleted: [] };
},
onDelete: function (id) {
this.setState({ deleted: this.state.deleted.concat([id]) });
},
render: function() {
var Items = this.props.data
.filter(item => this.state.deleted.indexOf(item.id) === -1)
.map(item => {
return (
<Item key={item.id} id={item.id} onDelete={id => this.onDelete(id)}>
{item.text}
</Item>
);
});
return (
<div className="items">
{Items}
</div>
);
}
});
var Item = React.createClass({
render: function() {
return (
<div className="item">
{this.props.children}
<button className="delete" onClick={() => this.props.onDelete(this.props.id)}>Delete</button>
</div>
);
}
});
ReactDOM.render(
<List data={Array of items} />,
document.getElementById('content')
);
回答by Vikramaditya
if you want to delete it from the child component itself then you may try this:
如果你想从子组件本身中删除它，那么你可以试试这个：
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
but its always better for parent to manipulate the child components rather than child components modifying itself. So, you should put the logic inside your parent component to mount the required number of child components, and child should only communicate to parent.
但它总是更好的父操作子组件而不是子组件修改自身。因此，您应该将逻辑放在父组件中以挂载所需数量的子组件，并且子组件应该只与父组件通信。
EDIT
编辑
i do not recommend to use the above method for the asked question, i wrote this answer because this is one of the way to unmount your component. Here is the official doc.Its completely fine to use this method, when you want to remove some child components from parent component that's why ReactDOM allows us to use this function.
我不建议对提出的问题使用上述方法，我写了这个答案，因为这是卸载组件的方法之一。这是官方文档。使用这个方法完全没问题，当你想从父组件中删除一些子组件时，这就是 ReactDOM 允许我们使用这个功能的原因。
