0

Имею вот такой компонент

const FooterLangLi = styled.li.attrs({
  selected: true,
})<React.LiHTMLAttributes<HTMLLIElement>>`
  font-family: var(--famyli);
  font-size: 15px;
  font-weight: ${(props) => (props.selected ? 500 : 700)};
  cursor: pointer;
  color: ${(props) => (props.selected ? "#101010" : "#FFA542")};
`;

отрисовываю его передав объект

const langObj = {
  ru: "Рус",
  en: "Eng",
};

{Object.entries(langObj).map(([key, value]) => (
                  <FooterLangLi
                    key={key}
                    data-id={key}
                    onClick={(e) => selectLang(e)}
                  >
                    {value}
                  </FooterLangLi>}

использую react-i18next для смены языка по клику

 const selectLang = (e: React.MouseEvent<HTMLElement>) => {
    i18n.changeLanguage(e.currentTarget.dataset.id);
    }
  };

Впервые начал осваивать styled-components. Не могу понять как мне изменять стиль при клике на нужный элемент.Есть мысль, что надо проверять какой сейчас активный язык и сравнить его с data-id на li

1 ответ 1

0

Если честно не силён в JS, так что реализация так себе, но примерно вот так должно работать

const [isActive, setIsActive] = useState(false);

const selectLang = (e: React.MouseEvent<HTMLElement>) => {
  const selectedLang = e.currentTarget.dataset.id;
  i18n.changeLanguage(selectedLang);
  setIsActive(true);
};

return (
  <FooterLangLi
    key={key}
    data-id={key}
    onClick={selectLang}
    selected={isActive}
  >
    {value}
  </FooterLangLi>
);


const FooterLangLi = styled.li.attrs((props) => ({
  selected: props.selected,
}))<React.LiHTMLAttributes<HTMLLIElement>>`
  font-family: var(--famyli);
  font-size: 15px;
  font-weight: ${(props) => (props.selected ? 500 : 700)};
  cursor: pointer;
  color: ${(props) => (props.selected ? "#101010" : "#FFA542")};
`;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.