React中如何通过超时设置修改SurveyJS页面导航按钮可见性？

问题核心在于：直接在setTimeout回调中修改SurveyJS实例属性，不会触发React组件重新渲染，导致界面无法更新；同时闭包可能让你访问到旧的survey实例。

解决方案步骤： #

1. 用React状态控制重渲染
   在组件中用useRef保存SurveyJS实例避免闭包问题，同时定义状态变量触发组件重渲染：

   import React, { useState, useRef, useEffect } from 'react';
   import { Model } from 'survey-core';
   import { Survey } from 'survey-react-ui';
   
   export default function SurveyComponent() {
     const [forceRender, setForceRender] = useState(0);
     const surveyRef = useRef(null);
   
     // 初始化SurveyJS实例
     useEffect(() => {
       const survey = new Model({
         // 你的问卷配置
         pages: [
           { name: 'page1', elements: [{ type: 'text', name: 'question1' }] }
         ]
       });
   
       // 页面切换时先隐藏导航按钮，3秒后显示
       survey.onCurrentPageChanged.add(() => {
         survey.currentPage.navigationButtonsVisibility = 'hidden';
         setTimeout(() => {
           if (survey.currentPage) {
             survey.currentPage.navigationButtonsVisibility = 'show';
             // 触发React重渲染，更新界面
             setForceRender(prev => prev + 1);
           }
         }, 3000);
       });
   
       surveyRef.current = survey;
     }, []);
   
     return <Survey model={surveyRef.current} key={forceRender} />;
   }
   

2. 关键说明

   • useRef存储SurveyJS实例，确保setTimeout回调能访问到最新的实例。
   • 修改按钮属性后，更新forceRender状态给Survey组件加key，触发组件重渲染以应用最新属性。
   • 页面切换时先强制隐藏按钮，再启动定时器，保证每次进入新页面都有3秒等待时间。

另一种贴合React状态驱动的方式 #

直接用状态变量控制导航按钮可见性，将状态绑定到SurveyJS实例：

import React, { useState, useMemo } from 'react';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

export default function SurveyComponent() {
  const [navVisibility, setNavVisibility] = useState('hidden');

  // 每次navVisibility变化时，重新创建Survey实例并设置属性
  const survey = useMemo(() => {
    const surveyInstance = new Model({
      pages: [
        { name: 'page1', elements: [{ type: 'text', name: 'question1' }] }
      ]
    });
    if (surveyInstance.currentPage) {
      surveyInstance.currentPage.navigationButtonsVisibility = navVisibility;
    }
    // 页面切换时重置可见性并启动定时器
    surveyInstance.onCurrentPageChanged.add(() => {
      setNavVisibility('hidden');
      setTimeout(() => setNavVisibility('show'), 3000);
    });
    return surveyInstance;
  }, [navVisibility]);

  return <Survey model={survey} />;
}

这种方式利用useMemo，当navVisibility状态变化时重新生成Survey实例并应用最新可见性设置，完全贴合React状态驱动模式。

内容的提问来源于stack exchange，提问作者Jakub Jędrusiak