将 SurveyJS 与 Nextjs 一起使用

Question

据了解，NextJS 正在使用服务器端呈现，我想使用 SurveyJs，但 surveyJS 正在使用一些必须在客户端执行的功能。在我的例子中，我想使用 StylesManager.applyTheme 但它会引发服务器错误 ReferenceError: document is not defined

有什么方法可以在客户端执行 applyTheme 函数？

Answer 1

您可以通过创建一个使用外部函数来应用此主题的 useEffect Hook 来实现：

import {useEffect} from 'react'

useEffect(() => {
  const newSurveyCreator = new SurveyJSCreator.SurveyCreator('surveyCreatorContainer', surveyCreatorConfig);
  
  newSurveyCreator.saveSurveyFunc = function() {
    console.log(this);
    console.log(this && this.text);
  };
    
  updateSurveyCreator(newSurveyCreator);

}, []);

Answer 2

为了更好地实施，我使用来自 NextJs

的动态导入解决了这个问题

相反，我这样导入 SurveyComponent：

const SurveyComponent = dynamic(
  () => import("../../../../components/survey/PartOne"),
  {
    ssr: false,
  }
);

确保我的 SurveyComponent 不在服务器端呈现。

将 SurveyJS 与 Nextjs 一起使用

Use SurveyJS along with Nextjs

reactjs

next.js

surveyjs