Reactjs 使用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，{useffect}来自“React”；
导入“/list.css”；
从“/listitem”导入列表项；
功能列表（道具）{
常量卸载=（要卸载的内容）=>{
prop.itemsremove（prop.items.pop（要卸载的内容））；
};
设i=0；
如果（prop.items.length==0）{
返回；
}否则{
返回(
{prop.items.map（（item）=>{
如果（项目！==“”）{
返回；
}否则{
返回；
}
})}
);
}
}
导出默认列表；

我想在单击按钮时卸载此功能

    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;

从“React”导入React，{useffect}；
从“react”导入{useState}；
导入“/listitem.css”；
从“@material ui/icons/Delete”导入DeleteIcon；
功能列表\项目（道具）{
const[check，setcheck]=useState（false）；
useffect（（）=>{
让checkbox=document.getElementById（`checkbox${props.name}`）；
如果（复选框。选中）{
document.getElementById（props.name）.style.textDecoration=“行通过”；
}否则{
document.getElementById（props.name）.style.textDecoration=“无”；
}
});
返回(
{props.name}
|{" "}
setcheck（！check）}
>{" "}
|
{
道具卸载（道具名称）；
}}
/>

但它不起作用

---

请帮忙。

为什么是

和非
？这是因为我将属性作为对象获取，并且没有进行任何分解。这就是为什么。我特别需要只发送unmount函数。