SurveyJS React项目下拉框None/Other选项不显示问题求助

问题概述 #

在SurveyJS编辑器中创建下拉框时，已勾选「允许Other选项」和「允许None选项」，这两个选项在surveyjs.io的预览界面正常显示，但在本地React项目（使用SurveyJS v1.9.33版本）中无法渲染出来。

相关截图 #

• 下拉选项配置：
• 「允许None」与「允许Other」勾选状态：
• 问卷JSON编辑器内容：
• surveyjs.io预览效果：
• 本地React项目运行结果：

现有代码示例 #

import 'survey-core/modern.min.css';
import { StylesManager, Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

StylesManager.applyTheme("modern");

export function App() {
   const json = {
        surveyId: 'fff11111',
        resultId: 'aaaaa11111',
        postId:'11111bbbb',
      };
  
   const survey = new Model(json);
   return (<Survey model={survey} />)
}

解决思路与方案 #

1. 补充完整的问卷JSON配置 #

当前代码仅传入了surveyId、resultId等标识字段，没有包含实际的问卷题目及下拉框的Other/None配置。SurveyJS本地初始化时不会自动从服务器拉取问卷内容，必须传入完整的问卷JSON。

解决步骤：

• 从surveyjs.io编辑器中导出完整的问卷JSON（点击编辑器顶部的「导出JSON」按钮）
• 将导出的JSON替换到代码中的json对象里，示例如下：

const json = {
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "dropdown",
          "name": "yourDropdownQuestion",
          "choices": ["选项A", "选项B", "选项C"],
          "showOtherItem": true,
          "showNoneItem": true,
          "otherText": "其他",
          "noneText": "无"
        }
      ]
    }
  ]
};

2. 验证版本兼容性 #

v1.9.33是相对老旧的版本，可能存在部分配置渲染的bug。可以尝试：

• 升级到v1.9.x系列的最新版本（如v1.9.129），该版本修复了不少旧版本的兼容性问题
• 若升级后问题仍存在，可以考虑迁移到v2.x版本（注意v2.x有API变动，需对照官方文档调整代码）

3. 检查样式加载情况 #

确认survey-core/modern.min.css是否成功加载：

• 打开浏览器开发者工具的「Network」面板，筛选CSS文件，查看该样式文件的加载状态
• 若样式加载失败，检查import路径是否正确，或尝试改用CDN引入样式：

<link href="https://unpkg.com/survey-core@1.9.33/modern.min.css" rel="stylesheet">

4. 确认Model初始化逻辑 #

确保new Model(json)传入的JSON包含完整的题目配置，而非仅标识字段。如果需要从SurveyJS服务器加载问卷，需额外实现加载逻辑（调用SurveyJS的API拉取问卷配置），但本地项目优先建议直接使用导出的完整JSON。

内容的提问来源于stack exchange，提问作者thegetaway