Позвольте мне объяснить мою проблему, которую я решал весь день. У меня есть сайт с заголовком, на котором есть ссылки на другие страницы (главная страница, проекты, информация, услуги, контакты). Иметь компонент Project, который находится на странице '/ projects' и на странице '/' (home).
Я хочу сделать простую анимацию в Project. js компонент, который зависит от наличия «вертикали». или нет этого реквизита. Ясно -> в '/ projects' я хочу сделать эту анимацию при прокрутке - на других страницах нет.
Попытка сделать это с помощью оператора add if в useEffect, но он не работает, выведите мне ошибку "не может прочитать свойство 'style' of null ref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;
Эта проблема появляется, когда я меняю страницы в заголовке, например. Я нахожусь в прокрутке '/ projects' и все в порядке, анимация работает тогда go до '/', и когда прокрутка получила ошибку, которую я показал выше.
Это похоже на мой оператор if, который не работает, и когда я нахожусь в '/', компонент Project имеет вертикальный подпор = {false} создает анимацию при прокрутке, когда я этого не хочу.
Что я хочу? Я хочу сделать анимацию, используя useEffect, только если у компонента есть реквизит "вертикальный", например:
Project. js Код компонента:
const Project = ({ image, className, vertical }) => {
const ref = useRef(null);
const [isVertical, setIsVertical] = useState(vertical);
useEffect(() => {
console.log('component did mount');
isVertical
? window.addEventListener('scroll', () => {
ref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;
})
: console.log('non-vertical');
}, [isVertical]);
useEffect(() => {
return () => console.log('unmount');
});
return <StyledProject image={image} className={className} vertical={vertical} ref={ref} />;
};
в доме '/':
{images.map(({ image, id }) => (
<Project key={id} image={image} />
))}
в '/ projects':
{images.map(({ image, id }) => (
<StyledProject vertical image={image} key={id} />
))}
, когда я нахожусь на пути '/ projects', и go на другой путь получил ошибку. Это похоже на то, что после нахождения в «/ projects» сохраняются все операторы, но я хочу на каждой странице сбросить useEffect и ref.current
Пожалуйста, помогите мне, я не могу go дальше, так как я не делаю ' t исправить это.
Заранее спасибо.