Блог

Я работаю над созданием навигационного компонента, который отображает массив объектов, предоставляя каждой навигационной кнопке ссылку для маршрутизации. Я использую стилизованные компоненты для создания интерактивных компонентов div, которые служат моими кнопками навигации. Ссылки передаются в формате JSON, что-то вроде: { link: <a href="#123">Sub 1</a> } . Когда я нажимаю на вкладку навигации, я хочу программно щелкнуть эту ссылку.

Я пробовал использовать window.location.replace и передача только href в объекте. Это работает, однако это не является желаемым решением для нашего проекта.

Я также попытался оформить сам навигационный компонент как <a> элемент, однако довольно сложно оформить <a> элемент тега.

Итак, у меня есть свой стилизованный компонент:

 const SubNavTabOpen = styled.div`
  width: 16.25rem;
  padding: 1.125rem 2.1875rem 1rem 3.3125rem;
  height: 3.5rem;
  line-height: 1.375rem;
  box-sizing: border-box;
  background-color: #1a2d3b;
  color: ${basic[500]};
  font-family: ${primaryFont};
  font-size: ${typeScale.paragraph1};
  amp;:hover {
    color: ${basic[100]};
    cursor: pointer;
  }
  amp;:focus {
    background-color: #434e59;
    color: ${basic[100]};
    outline: none;
  }
  

 <SubNavTabOpen
   tabIndex="0"
   data-testid={"sub-nav-open-"   index}
   onKeyDown={(e) => handleRedirect(e, navItem.link)}
>
   <div>{navItem.link}</div>
</SubNavTabOpen>
  

Я думаю, что добавлю name свойство к объекту данных, чтобы фактически не отображать <a> элемент на странице. Основная причина этого заключается в том, что <a> элемент не заполняет все пространство, необходимое для того, чтобы пользователи могли щелкнуть некоторые области навигационного компонента и не перенаправляться.

Мои события обработки должны выполнять некоторый тип программного щелчка

   const handleRedirect = (e, link) => {
    if (e.which === 13) {
      link.click();
    }
  };
  

link.click() Приведенный выше код на самом деле не выполняется, и это то, что я пытаюсь выяснить.