Блог

Главная - Вопросы по программированию - Как я могу получить значение дочерних реквизитов вне react map

Как я могу получить значение дочерних реквизитов вне react map

#reactjs #next.js

#reactjs #next.js

Вопрос:

я хочу добавить класс на панель, если у какого-либо из его дочерних элементов есть класс ‘acitve’. как добавить класс ‘parent-active’, если дочерний элемент получает класс ‘active’. спасибо за вашу помощь!

 const MyComponent = ({
  router,
  className,
  items
}) => {

  return (
    <Collapse accordion={true}>
      {items.map(dropdown => {
        return (
          <Panel
            header={dropdown.title}
            headerClass="dropdown-title"
            className={router.pathname === item.href ? 'parent-active' : ''}
            key={dropdown.id}
          >
            {dropdown.dropdownItems.length}
            {dropdown.dropdownItems.map(item => (
              <Link href={item.href} key={item.id}>
                <a
                  className={
                    router.pathname === item.href ? 'active' : ''
                  }
                >
                  {item.label}
                </a>
              </Link>
            ))}
          </Panel>
        );
      })}
    </Collapse>
  );
};

export default withRouter(MyComponent);

Комментарии:

1. Кристиан написал четкое решение, но просто чтобы вы знали, вы назвали переменную внутри вашего первого элемента метода map вместо выпадающего списка. Строка className={router.pathname === item.href? ‘parent-active’ : «} должно быть className={router.pathname === dropdown.href ? ‘parent-active’ : «}

Ответ №1:

Мы можем использовать Array.prototype.some() , чтобы определить, будет ли у какого-либо из дочерних элементов active класс:

 const isAnyChildActive = dropdownItems.some((item) => router.pathname === item.href);

И полный фрагмент кода:

 const MyComponent = ({
  router,
  className,
  items
}) => {

  return (
    <Collapse accordion={true}>
      {items.map(dropdown => {
        const { dropdownItems } = dropdown;
        const isAnyChildActive = dropdownItems.some((item) => router.pathname === item.href);

        return (
          <Panel
            header={dropdown.title}
            headerClass="dropdown-title"
            className={isAnyChildActive ? 'parent-active' : ''}
            key={dropdown.id}
          >
            {dropdown.dropdownItems.length}
            {dropdown.dropdownItems.map(item => (
              <Link href={item.href} key={item.id}>
                <a
                  className={
                    router.pathname === item.href ? 'active' : ''
                  }
                >
                  {item.label}
                </a>
              </Link>
            ))}
          </Panel>
        );
      })}
    </Collapse>
  );
};

export default withRouter(MyComponent);