如何解决卸载具有React功能的组件
我想从自身中删除一个组件。因此,我尝试在其父级中创建一个函数并从组件中调用它
我有一个带有状态的数组,我尝试通过从数组中删除组件来进行卸载。
这是父母。卸载是功能
import React,{ useEffect } from "react";
import "./list.css";
import List_item from "./listitem";
function List(prop) {
const unmount = (what_to_unmount) => {
prop.itemremove(prop.items.pop(what_to_unmount));
};
let i = 0;
if (prop.items.length === 0) {
return <div></div>;
} else {
return (
<div className="list_item">
{prop.items.map((item) => {
if (item !== "") {
return <List_item name={item} unmount={prop.unmount} />;
} else {
return <div></div>;
}
})}
</div>
);
}
}
export default List;
我要在单击按钮时卸载此功能
import React,{ useEffect } from "react";
import { useState } from "react";
import "./listitem.css";
import DeleteIcon from "@material-ui/icons/Delete";
function List_item(props) {
const [check,setcheck] = useState(false);
useEffect(() => {
let checkbox = document.getElementById(`checkbox${props.name}`);
if (checkbox.checked) {
document.getElementById(props.name).style.textDecoration = "line-through";
} else {
document.getElementById(props.name).style.textDecoration = "none";
}
});
return (
<div>
<div className="item">
<span className="text" id={`${props.name}`}>
{props.name}
</span>
<div>
|{" "}
<input
type="checkbox"
id={`checkbox${props.name}`}
checked={check}
onClick={() => setcheck(!check)}
></input>{" "}
|
<span className="delete">
<DeleteIcon
onClick={() => {
props.unmount(props.name);
}}
/>
</span>
</div>
</div>
<hr className="aitem" />
</div>
);
}
export default List_item;
但是它不起作用。
请帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。