Javascript 使用react full page有条件地设置滚动模式

我目前正在我的网页上使用react完整页面模块。问题是，在手机或平板电脑上，我不想看到整页的滚动，因为这很奇怪，也很不舒服。组件

有一个名为scrollMode的属性，可以是“普通”或“完整页面”

如何动态更新该值？我知道名为window.innerWidth的属性，但我不知道如何使用它，我尝试使用useffect和useState，但它不起作用

代码如下：

import React, {useState, useEffect} from 'react';
import ScrollToTop from "react-scroll-to-top";
import {Helmet} from 'react-helmet';
import { FullPage, Slide } from 'react-full-page';

// Components //
import MainBanner from '../components/common/MainBanner';
import HomeProjects from '../components/common/HomeProjects';
import AboutMe from '../components/common/AboutMe';
import Skills from '../components/common/Skills';
import ContactCommon from '../components/common/Contact';
import Warning from '../components/common/Warning';

const Home = () => {

    let innerWidth;

    useEffect(() => {
        if(window.innerWidth <= 768) innerWidth = "normal";
        else innerWidth = "full-page";
    }, [innerWidth]);

    console.log(innerWidth);

    const [warningPage, setWarningPage] = useState(true);
    
    return ( 
        warningPage ? (<Warning setWarningPage={setWarningPage}/>) : (
            <div className="home-container">
        <Helmet>
            <title>Alejo Yanczuk - Home</title>
            <meta name="description" content="Home page | Web developer website" data-react-helmet="true"/>
        </Helmet>
        <div>

            <FullPage scrollMode={innerWidth}>
                <Slide>
                    <MainBanner />
                </Slide>
                <Slide>
                    <AboutMe />
                </Slide>
                <Slide>
                    <Skills />
                </Slide>
                <Slide>
                    <HomeProjects />
                </Slide>
                <Slide>
                    <ContactCommon />
                </Slide>
            </FullPage>

            <div>
            <ScrollToTop smooth/>
            </div>
        </div>
        </div>
        )
    );
}
 
export default Home;

import React，{useState，useffect}来自“React”；
从“反应滚动至顶部”导入滚动至顶部；
从“react Helmet”导入{Helmet}；
从“react full page”导入{FullPage，Slide}；
//组成部分//
从“../components/common/MainBanner”导入MainBanner；
从“../components/common/HomeProjects”导入HomeProjects；
从“../components/common/AboutMe”导入AboutMe；
从“../components/common/Skills”导入技能；
从“../components/common/Contact”导入ContactCommon；
从“../components/common/Warning”导入警告；
常量Home=（）=>{
让内宽；
useffect（（）=>{
如果（window.innerWidth将useEffect与变量一起用作依赖项，而不是状态

您需要使用一个状态，并为innerWidth创建一个状态

您还需要使用
addEventListener
从窗口侦听rezize事件

以下是一个例子：

const Home=（）=>{
const[innerWidth，setInnerWidth]=useState（true）；
useffect（（）=>{
函数onResize（）{
//这里有一个避免if/else的快速语法
setInnerWidth（window.innerWidth window.removeEventListener（“调整大小”，onResize）
}，[innerWidth]）；
const[warningPage，setWarningPage]=useState（true）；
返回警告页面(
)....
好的，我试试看，非常感谢您的回复！