0

我想从自身中删除一个组件。所以我尝试在其父级中创建一个函数并从组件中调用它

我有一个包含状态的数组，我尝试通过从数组中删除组件来卸载。

这是父母。卸载是功能

    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;

但它不起作用。

请帮忙。

4

0 回答 0