#javascript #reactjs #next.js
Вопрос:
У меня есть класс под названием: product-page-bottom-padding
теперь я хочу добавить /product/{slug} в элемент только маршрут этого класса body . Он должен удаляться по другим маршрутам.
Как справиться с этим сценарием?
Комментарии:
1. На мой взгляд, лучшим подходом было бы отправить имя класса в качестве реквизита компоненту при вызове маршрута. Тогда компонент может иметь такое условие, как
className={classProp? classProp : null)
Ответ №1:
Вы можете добавить класс в тело в крюке useefect компонента, который вы визуализируете для /product/{slug} чего-то вроде:
function ChildComponent() {
useEffect(() => {
document.body.classList.add("product-page-bottom-padding");
return () => {
document.body.classList.remove("product-page-bottom-padding");
}
}, [])
// other body
}
Ответ №2:
в Next.js, каждая страница(маршрут) рассматривается как отдельный компонент, поэтому вы можете обернуть ее условным (троичным) оператором следующим образом :
className={condition? firstClass: secondClass}