Блог

Главная - Вопросы по программированию - Реагировать | изменять родительский стиль, когда у дочернего элемента есть класс

Реагировать | изменять родительский стиль, когда у дочернего элемента есть класс

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

У меня есть меню, в котором есть выпадающее меню для одного из элементов. Когда я выбираю один из пунктов выпадающего меню, он добавляет к нему класс, изменяя его стиль.

Мне нужно также изменить стиль своих родителей, чтобы пользователь понимал, что что-то внутри этого выпадающего списка выбрано, но я не смог разобраться в этом (я, вероятно, не подхожу к этому должным образом).).

Как я могу затем изменить этого родителя на основе одного из дочерних элементов, имеющих этот указанный класс?

 class NavigationSection extends Component {
  renderInternalLinks(internal, proeminent) {
    return (
      <InternalLinksWrapper className={proeminent ? 'is-proeminent' : ''}>
        <SectionTitle>{internal.title}</SectionTitle>
        <LinkList>
          {internal.links.map(({ title, link, type, submenu }, index) => {
            switch (type) {
              case 'internal_link':
                return (
                  <li key={index}>
                    <NavigationGatsbyLink to={link}>
                      {title}
                    </NavigationGatsbyLink>
                    {submenu amp;amp; submenu.length > 0 ? (
                      <SubMenu className="submenu" aria-label="submenu">
                        {submenu.map(({ link, title }, index) => (
                          <li key={index}>
                            <NavigationGatsbyLink key={index} to={link}>
                              {title}
                            </NavigationGatsbyLink>
                          </li>
                        ))}
                      </SubMenu>
                    ) : null}
                  </li>
                );

              [...]
          })}
        </LinkList>
      </InternalLinksWrapper>
    );
  }
  [...]
}

У одного элемента SubMenu будет is-active класс, и я должен затем изменить стиль NavigationGatsbyLink , который идет прямо перед {submenu amp;amp; submenu.length > 0

is-active добавляется в NavigationGatsbyLink by activeClassName , класс, который добавляется в Gatsby Link, когда он активен

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

1. Как определяется ‘is-active’? Это строго CSS? Или есть какой-то контекст внутри submenu массива?

2. @technicallynick, ‘is-active’ добавляется в навигационную ссылку через activeClassName, которая есть в ссылке Gatsby

3. Похоже, что Gatsby учел этот тип варианта использования, включив getProps свойство в Link компонент. Я бы, вероятно, отправил функцию обратного вызова Link компоненту, который является обратным вызовом, если isCurrent или isPartiallyCurrent имеет значение true, чтобы раскрасить родительский компонент или добавить класс. gatsbyjs.com/docs/gatsby-link /…

4. Если вы настроите codesandbox, я могу попробовать поработать с вами немного больше на примере.

5. @technicallynick, спасибо, partiallyActive={true} это был правильный путь. Я пытался использовать getProps , но это действительно ничего не делало, но partiallyActive сделало свое дело, спасибо!

Ответ №1:

Документация Gatsby показывает, что вы можете выполнить расширенный стиль ссылок, вызвав getProps свойство Link компонента. Из вашего комментария в вашем сообщении кажется, что все, что вам действительно было нужно, было partiallyActive={true} .