UseParallax ref hook 不适用于 NextJs 中的组件答案

【问题标题】：UseParallax ref hook not working with components in NextJsUseParallax ref hook 不适用于 NextJs 中的组件
【发布时间】：2022-10-20 19:20:15
【问题描述】：

我正在尝试在我的 js 文件中的元素上使用 useParallax 挂钩。我将 NextJs 与 ReactJs 以及样式组件一起使用。我通过以下方式使用了钩子：

Mainland.js

import React, { useEffect, useRef } from 'react';
import styled, { keyframes } from 'styled-components';
import { useParallax } from 'react-scroll-parallax';

const Mainland = () => {
const { parallaxRef } = useParallax({ speed: 20 }); // set up the hook to use with useRef

const StyledDiv = styled.div`` //Styled Component

return (
<StyledDiv ref={parallaxRef}>
...
</StyledDiv>

这里的错误如下：

错误：您必须将 useParallax() 挂钩返回的 ref 分配给 HTML 元素。

所以我尝试在没有样式组件的情况下直接使用 HTML 元素，但它仍然无法正常工作。

额外的信息：我通过以下方式在我的 _app.js 文件中使用了视差提供程序：
import Layout from '../Components/Layout';
import '../styles/globals.css';
import { ParallaxProvider } from 'react-scroll-parallax';

function MyApp({ Component, pageProps, ...appProps }) {
  const isLayoutNeeded = [`/Contact`].includes(appProps.router.pathname);
  return (
    <>
      <Layout state={isLayoutNeeded}>
        <ParallaxProvider>
          <Component {...pageProps} />
        </ParallaxProvider>
      </Layout>
    </>
  );
}

export default MyApp;
附加信息：https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax

【问题讨论】：

标签： html reactjs react-hooks next.js use-ref

【解决方案1】：

useParallax 挂钩返回 { ref, controller, element }。

所以试试这个：

const { ref: parallaxRef } = useParallax({ speed: 20 });

【讨论】：

【解决方案2】：

在项目文件夹中安装模块。那为我修好了

npm i install react-scroll-parallax

【讨论】：