Reactjs 如何使用survey.js呈现React组件？

下面是一个正在运行的survey.js，其中包含react示例：

我的html中也包含了

在我的main.jsx中，我调用了一个div的呈现，该div将根据一个json文件和多个react组件填充，在我的json数组中，我还有一个用于survey.js的questions json对象。我想要实现的是在解析数组时到达questions对象时呈现一个调查

在我的顶级组件中，我有这样一个要求：

  if (section.hasOwnProperty('questions')){
            return <Questions key={i+"questions"} id={i+"questions"} questions={section.questions} />;

if（section.hasOwnProperty（'questions'））{
返回；

Questions.jsx：

var React = require('react');
var ReactDOM = require('react-dom');
var Survey = require('survey-react');
var Questions = React.createClass({
    render: function() {
      Survey.Survey.cssType = "bootstrap";
      Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
      window[this.props.id] = new Survey.Model( this.props.questions );
      var questionid = this.props.id;
        var idi = this.props.id.replace("questions","");
        return (
            <dt>
          <div id={this.props.id}></div>
          </div>
     </dt>
        );
    }
});
module.exports = Questions;
ReactDOM.render(<Survey.Survey model={window[questionid]} />, document.getElementById({questionid}));

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
风险值调查=要求（“调查-反应”）；
var Questions=React.createClass({
render:function（）{
Survey.Survey.cssType=“bootstrap”；
Survey.defaultBootstrapCss.navigationButton=“btn btn绿色”；
window[this.props.id]=新的Survey.Model（this.props.questions）；
var questionid=this.props.id；
var idi=this.props.id.replace（“问题”和“”）；
返回(
);
}
});
module.exports=问题；
render（，document.getElementById（{questionid}））；

它编译时没有错误，但在浏览器中，我得到了控制台错误：

类型错误：导入的网页\u模块\u 1\u react未定义[学习] 更多] ReferenceError:未定义问题ID

似乎我试图用错误的方式来做，但如何做才是正确的？我对react不熟悉，不熟悉在组件内部使用reactDOM，也是我在survey.js上的第一个项目

---

谢谢您的帮助。

请检查此代码：

import React, { Component } from 'react';
import { render } from 'react-dom';

import * as Survey from 'survey-react';
import 'survey-react/survey.css';

import 'bootstrap/dist/css/bootstrap.css'
import './style.css';

class App extends Component {
  componentWillMount() {    
    Survey.Survey.cssType = "bootstrap";
    Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
  }

  render() {    
    var json = { title: "Product Feedback Survey Example", showProgressBar: "top", pages: [
        {questions: [
            { type: "matrix", name: "Quality", title: "Please indicate if you agree or disagree with the following statements",
                columns: [{ value: 1, text: "Strongly Disagree" },
                    { value: 2, text: "Disagree" },
                    { value: 3, text: "Neutral" },
                    { value: 4, text: "Agree" },
                    { value: 5, text: "Strongly Agree" }],
                rows: [{ value: "affordable", text: "Product is affordable" },
                    { value: "does what it claims", text: "Product does what it claims" },
                    { value: "better then others", text: "Product is better than other products on the market" },
                    { value: "easy to use", text: "Product is easy to use" }]},
            { type: "rating", name: "satisfaction", title: "How satisfied are you with the Product?",
                mininumRateDescription: "Not Satisfied", maximumRateDescription: "Completely satisfied" },
            { type: "rating", name: "recommend friends", visibleIf: "{satisfaction} > 3",
                title: "How likely are you to recommend the Product to a friend or co-worker?",
                mininumRateDescription: "Will not recommend", maximumRateDescription: "I will recommend" },
            { type: "comment", name: "suggestions", title:"What would make you more satisfied with the Product?", }
        ]},
        {questions: [
            { type: "radiogroup", name: "price to competitors",
                title: "Compared to our competitors, do you feel the Product is",
                choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]},
            { type: "radiogroup", name: "price", title: "Do you feel our current price is merited by our product?",
                choices: ["correct|Yes, the price is about right",
                    "low|No, the price is too low for your product",
                    "high|No, the price is too high for your product"]},
            { type: "multipletext", name: "pricelimit", title: "What is the... ",
                items: [{ name: "mostamount", title: "Most amount you would every pay for a product like ours" },
                    { name: "leastamount", title: "The least amount you would feel comfortable paying" }]}
        ]},
        { questions: [
            { type: "text", name: "email",
                title: "Thank you for taking our survey. Your survey is almost complete, please enter your email address in the box below if you wish to participate in our drawing, then press the 'Submit' button."}
        ]}
    ]};

    var model = new Survey.Model(json);    
    return (
      <Survey.Survey model={model}/>
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“调查反应”导入*作为调查；
导入“survey react/survey.css”；
导入“bootstrap/dist/css/bootstrap.css”
导入“/style.css”；
类应用程序扩展组件{
componentWillMount（）{
Survey.Survey.cssType=“bootstrap”；
Survey.defaultBootstrapCss.navigationButton=“btn btn绿色”；
}
render（）{
var json={title:“产品反馈调查示例”，showProgressBar:“顶部”，页面：[
{问题：[
{键入：“矩阵”，名称：“质量”，标题：“请说明您是否同意以下陈述”，
列：[{value:1，文本：“强烈不同意”}，
{值：2，文本：“不同意”}，
{值：3，文本：“中性”}，
{值：4，文本：“同意”}，
{值：5，文本：“强烈同意”}，
行：[{value:“负担得起”，文本：“产品是负担得起的”}，
{value:“做它声称的”，text:“产品做它声称的”}，
{价值：“优于他人”，文本：“产品优于市场上的其他产品”}，
{值：“易于使用”，文本：“产品易于使用”}]}，
{类型：“评级”，名称：“满意度”，标题：“您对产品的满意度如何？”，
最小描述：“不满意”，最大描述：“完全满意”}，
{键入：“评级”，名称：“推荐朋友”，如果访问：{满意度}>3，
标题：“您向朋友或同事推荐产品的可能性有多大？”，
最小描述：“不会推荐”，最大描述：“我会推荐”}，
{键入：“评论”，名称：“建议”，标题：“什么会让您对产品更满意？”，}
]},
{问题：[
{键入：“radiogroup”，名称：“竞争对手的价格”，
标题：“与我们的竞争对手相比，您觉得该产品是”，
选择：[“便宜”、“价格差不多”、“更贵”、“不确定”]，
{类型：“radiogroup”，名称：“price”，标题：“您认为我们当前的价格值得我们的产品吗？”，
选择：[“正确|是的，价格差不多合适”，
“低|不，价格对您的产品来说太低了”，
“高|不，价格对你的产品来说太高了”]}，
{键入：“multipletext”，名称：“pricelimit”，标题：“What is the…”，
项目：[{name:“mostamount”，title:“您愿意为我们这样的产品支付的最高金额”}，
{name:“leastamount”，title:“您愿意支付的最低金额”}]}
]},
{问题：[
{键入：“文本”，名称：“电子邮件”，
标题：“感谢您参与我们的调查。您的调查已接近完成，如果您希望参与我们的绘图，请在下面的框中输入您的电子邮件地址，然后按“提交”按钮。”}
]}
]};
var模型=新的Survey.model（json）；
返回(
);
}
}
渲染（
请检查此代码：

import React, { Component } from 'react';
import { render } from 'react-dom';

import * as Survey from 'survey-react';
import 'survey-react/survey.css';

import 'bootstrap/dist/css/bootstrap.css'
import './style.css';

class App extends Component {
  componentWillMount() {    
    Survey.Survey.cssType = "bootstrap";
    Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
  }

  render() {    
    var json = { title: "Product Feedback Survey Example", showProgressBar: "top", pages: [
        {questions: [
            { type: "matrix", name: "Quality", title: "Please indicate if you agree or disagree with the following statements",
                columns: [{ value: 1, text: "Strongly Disagree" },
                    { value: 2, text: "Disagree" },
                    { value: 3, text: "Neutral" },
                    { value: 4, text: "Agree" },
                    { value: 5, text: "Strongly Agree" }],
                rows: [{ value: "affordable", text: "Product is affordable" },
                    { value: "does what it claims", text: "Product does what it claims" },
                    { value: "better then others", text: "Product is better than other products on the market" },
                    { value: "easy to use", text: "Product is easy to use" }]},
            { type: "rating", name: "satisfaction", title: "How satisfied are you with the Product?",
                mininumRateDescription: "Not Satisfied", maximumRateDescription: "Completely satisfied" },
            { type: "rating", name: "recommend friends", visibleIf: "{satisfaction} > 3",
                title: "How likely are you to recommend the Product to a friend or co-worker?",
                mininumRateDescription: "Will not recommend", maximumRateDescription: "I will recommend" },
            { type: "comment", name: "suggestions", title:"What would make you more satisfied with the Product?", }
        ]},
        {questions: [
            { type: "radiogroup", name: "price to competitors",
                title: "Compared to our competitors, do you feel the Product is",
                choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]},
            { type: "radiogroup", name: "price", title: "Do you feel our current price is merited by our product?",
                choices: ["correct|Yes, the price is about right",
                    "low|No, the price is too low for your product",
                    "high|No, the price is too high for your product"]},
            { type: "multipletext", name: "pricelimit", title: "What is the... ",
                items: [{ name: "mostamount", title: "Most amount you would every pay for a product like ours" },
                    { name: "leastamount", title: "The least amount you would feel comfortable paying" }]}
        ]},
        { questions: [
            { type: "text", name: "email",
                title: "Thank you for taking our survey. Your survey is almost complete, please enter your email address in the box below if you wish to participate in our drawing, then press the 'Submit' button."}
        ]}
    ]};

    var model = new Survey.Model(json);    
    return (
      <Survey.Survey model={model}/>
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“调查反应”导入*作为调查；
导入“survey react/survey.css”；
导入“bootstrap/dist/css/bootstrap.css”
导入“/style.css”；
类应用程序扩展组件{
componentWillMount（）{
Survey.Survey.cssType=“bootstrap”；
Survey.defaultBootstrapCss.navigationButton=“btn btn绿色”；
}
render（）{
var json={title:“产品反馈调查示例”，showProgressBar:“顶部”，页面：[
{问题：[
{键入：“矩阵”，名称：“质量”，标题：“请说明您是否同意以下陈述”，
列：[{value:1，文本：“强烈不同意”}，
{值：2，文本：“不同意”}，
{值：3，文本：“中性”}，
{值：4，文本：“同意”}，
{值：5，文本：“强烈同意”}，
行：[{值：“可承受”，文本：