如何从 css 中的 child 项目中删除项目 class 并做出反应？

Question

如果parent元素没有thanks元素，我想删除一个class或者它的效果，或者可以选择引用它的引用，这样它就可以被选中，但是我在互联网上找不到解决方案，我的一些想法已经被使用，在这种情况下我需要一些建议。情况如下：我有一个菜单，其中嵌套了子菜单，并且整个菜单由一个递归函数引导，如果菜单中的分类法有 children，该函数会调用自己下降级别。现在我想删除没有 children 的项目的效果，这意味着可以使用箭头展开菜单。

一个自称创建类别 (parents) 和子类别 (children) 的递归函数。


function NavBarLink({ ...props }) {
  const [classOpener, setClassOpener] = useState(false);
  const pathToCategories = `/categories/${props.codename}`;
  const dispatch = useDispatch();

  function handleTaxonomies(codename) {
    dispatch(catchCodeNameTaxonomies(codename));
    setClassOpener(!classOpener);
    return codename;
  }

  return (
    <span
      className={(classOpener && "opener active") || (!classOpener && "opener")}
    >
      <Link
        to={ pathToCategories }
        onClick={() => handleTaxonomies(props.codename)}
      >
        {props.name}
      </Link>
    </span>
  );
}

function NavBarItem({ ...props }) {
  function generateLink() {
    return (
      <NavBarLink
        name={props.name}
        codename={props.codename}
      />
    );
  }
  function generateSubmenu() {
    return <Menu items={props.terms} />;
  }
  function generateContent() {
    const content = [generateLink()];
    if (props.terms) {
      content.push(generateSubmenu());
    }
    return content;
  }
  const content = generateContent();
  return (
    <li> {content}</li>
  );
}
export default function Menu({ ...props }) {
  function generateItem(item) {
    return (
      <NavBarItem
        name={item.name}
        terms={item.terms}
        codename={item.codename}
        onClick={props.handleId}
      />
    );
  }

  const items = props.items.map(generateItem);
  return <ul className="menu-ul-child">{items}</ul>;
}

编辑:: 我有目的的新解决方案：

function NavBarLink({ ...props }) {
  const [classOpener, setClassOpener] = useState(false);
//add two icons
  const arrow = <i class="fas fa-chevron-up"></i>;
  const arrowDown = <i class="fas fa-chevron-down"></i>;

  function handleTaxonomies() {
    setClassOpener(!classOpener);
  }

  return (
       //your purpose
    <span
      className={`opener ${classOpener ? "active" : ""}`}
    >
      <Link
        className="d-flex justify-content-between"
        to={pathToCategories}
        onClick={() => handleTaxonomies(props.codename)}
      >
        <span>
          {props.name}
        </span>
      //add two icons depending on the state
        <span>
          {props.showArrow ? (classOpener ? arrow : arrowDown) : ""}
        </span>
      </Link>
    </span>
  );
}

function NavBarItem({ ...props }) {
  function generateLink() {
    return (
      <NavBarLink
        name={props.name}
        codename={props.codename}
      //your purpose
        showArrow={props.terms && props.terms.length > 0}
      />
    );
  }
}

Answer 1

最简单的方法是提供一个新的属性，例如 showArrow 到 NavbarLink。根据您的代码片段，我认为 showArrow 可以由 item.terms 设置。所以你可以这样做：

在 NavbarItem 中

  function generateLink() {
    return (
      <NavBarLink
        name={props.name}
        codename={props.codename}
        showArrow={props.terms && props.terms.length>0}
      />
    );
  }

然后提取 CSS 部分用于将箭头绘制到特殊 class 并检查 NavBarLink 中的 showArrow:

   <span
      className={`opener ${classOpener ? "active" : ""} ${props.showArrow ? "arrow" : ""}`}
    >
....

我已将 className 连接更改为字符串文字。对我来说，这更具可读性，并且更容易进行所有排列。

如何从 css 中的 child 项目中删除项目 class 并做出反应？

How can I remove a item class from a child's item in css and react?

menu

parent-child

reactjs