切换案例在 Reactjs 中不起作用

Question

我有一个 json，我正在尝试使用 json 数据显示一个表单。我尝试使用 Switch 案例显示索引，因此将根据 html 控件类型显示索引。下面是我的代码

var React = require('react');
var ReactDOM = require('react-dom');

var DATA = {
"indexList": [{
        "Label": "Name",
        "Type": "text",
        "Regex": "",
        "Default_Val": "",
        "Values": {
            "Key": "",
            "Value": ""
        },
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "required",
        "maxLength":"16",
        "minLength":"7",
        "format":"Alphanumeric",
        "cssClassName": "form-control",
        "Placeholder": ""
    },
    {
        "Label": "Select Language",
        "Type": "dropdown",
        "Regex": "",
        "Default_Val": "English",
        "Values": [{
            "Key": "option1",
            "Value": "English"
        },{
            "Key": "option2",
            "Value": "Spanish"
        }],
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "Y",
        "maxLength":"",
        "minLength":"",
        "format":"",
        "cssClassName": "form-control",
        "Placeholder": ""
    },

    {
        "Label": "Type",
        "Field_Type": "radio",
        "Regex": "",
        "Default_Val": "",
        "Values": [{
            "Key": "option1",
            "Value": "Form1"
        }, {
            "Key": "option2",
            "Value": "Form2"
        }, {
            "Key": "option3",
            "Value": "Form3"
        },{
            "Key": "option4",
            "Value": "Form4"
        },{
            "Key": "option5",
            "Value": "Form5"
        }],
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "Y",
        "maxLength":"",
        "minLength":"",
        "format":"",
        "cssClassName": "form-control",
        "Placeholder": ""
    }
]
};

var Menu = React.createClass({

renderForm: function () {

    var data = DATA.indexList;
    console.log(data);
    return data.map(group =>{
        return <div>
                <label for={group.Label}>{group.Label}</label>
                <div>
                    switch(group.Type) {
                        case 'text':
                        return <input className={group.cssClassName} 
                                      id={group.Label} 
                                      placeholder={group.Placeholder}
                                      {group.Mandatory}/>

                        case 'dropdown':
                        return <select className={group.cssClassName}>
                                    <option value="">{group.Placeholder}</option>
                                    <option for="let values of group.Values.value">{values}</option>
                                </select>


                        case 'radio':
                        return <div className={group.Type}>
                                    <div for="let value of group.Values">
                                        <label><input
                                        name="radios"/>{value}</label>
                                    </div>
                                </div>

                        case 'chekbox'
                        return <div className={group.Type}>
                                    <div for="let value of group.Values">
                                        <label><input name="checkbox"/>{value}</label>
                                    </div>
                                </div>
                    }
                </div>
               </div>
    });
},

render: function() {
    return (    
        <div className="container">
            <br/>
            <div className="panel panel-primary">
                <div className="panel-heading">Form</div>
                    <div className="panel-body">
                        <form>
                            <div className="form-group">
                                <div className="col-xs-5">
                                    {this.renderForm()}
                                    <button type="button" className="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>      
            </div>
        </div>
)}
});

module.exports = Menu

使用上面的代码，我收到一个错误“Unexpexcted token”，错误指向“case”。任何人都可以帮助解决这个问题，我是新手，我无法解决这个问题。代码中有语法错误吗？

Answer 1

因为你忘了放{}，所以用这个：

<div>
 {

 }

要在HTML 元素中使用任何javascript 代码，我们需要使用{}。

注意：我们不能直接在JSX中使用if-else/switch语句，使用ternary operator或者从JSX调用函数并在其中使用if-else/switch。

参考：http://reactjs.cn/react/tips/if-else-in-JSX.html

检查工作示例：

var DATA = {
"indexList": [{
        "Label": "Name",
        "Type": "text",
        "Regex": "",
        "Default_Val": "",
        "Values": {
            "Key": "",
            "Value": ""
        },
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "Y",
        "maxLength":"16",
        "minLength":"7",
        "format":"Alphanumeric",
        "cssClassName": "form-control",
        "Placeholder": ""
    },
    {
        "Label": "Select Language",
        "Type": "dropdown",
        "Regex": "",
        "Default_Val": "English",
        "Values": [{
            "Key": "option1",
            "Value": "English"
        },{
            "Key": "option2",
            "Value": "Spanish"
        }],
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "Y",
        "maxLength":"",
        "minLength":"",
        "format":"",
        "cssClassName": "form-control",
        "Placeholder": ""
    },

    {
        "Label": "Type",
        "Type": "radio",
        "Regex": "",
        "Default_Val": "",
        "Values": [{
            "Key": "option1",
            "Value": "Form1"
        }, {
            "Key": "option2",
            "Value": "Form2"
        }, {
            "Key": "option3",
            "Value": "Form3"
        },{
            "Key": "option4",
            "Value": "Form4"
        },{
            "Key": "option5",
            "Value": "Form5"
        }],
        "Validtion Msg": "",
        "Script": "",
        "Mandatory": "Y",
        "maxLength":"",
        "minLength":"",
        "format":"",
        "cssClassName": "form-control",
        "Placeholder": ""
    }
]
};

var Menu = React.createClass({

_renderElement: function(group){
   switch(group.Type){
                        case 'text':
                        return <input className={group.cssClassName} 
                                      id={group.Label} 
                                      placeholder={group.Placeholder}
                                      required={group.Mandatory == 'Y'? true: false}/>

                        case 'dropdown':
                        return <select className={group.cssClassName}>
                                    <option value="">{group.Placeholder}</option>
                                    {group.Values.map(el => <option key={el.Key} for="let values of group.Values.value">{el.Value}</option>)}
                                </select>


                        case 'radio':
                        return <div className={group.Type}>
                                    <div for="let value of group.Values">
                                    {group.Values.map(el=> <label key={el.Value}><input
                                        name="radios"/>{el.Value}</label>)}
                                    </div>
                                </div>

                        case 'checkbox':
                        return <div className={group.Type}>
                                    <div for="let value of group.Values">
                                        <label><input name="checkbox"/>{value}</label>
                                    </div>
                                </div>
                    }
},

renderForm: function () {

    var data = DATA.indexList;
    return data.map(group =>{
        return <div>
                <label for={group.Label}>{group.Label}</label>
                <div>
                {
                   this._renderElement(group)
                }
                </div>
               </div>
    });
},

render: function() {
    return (    
        <div className="container">
            <br/>
            <div className="panel panel-primary">
                <div className="panel-heading">Form</div>
                    <div className="panel-body">
                        <form>
                            <div className="form-group">
                                <div className="col-xs-5">
                                
                
                                    {this.renderForm()}
                                    <button type="button" className="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>      
            </div>
        </div>
)}
});

ReactDOM.render(<Menu/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

swithc-case 应该在大括号内

renderForm: function() {

  var data = DATA.indexList;
  console.log(data);
  return data.map(group => {
    return <div >
      < label
    for = {
      group.Label
    } > {
      group.Label
    } < /label> < div >{
      switch (group.Type) {
        case 'text':
          return <input className = {
            group.cssClassName
          }
          id = {
            group.Label
          }
          placeholder = {
            group.Placeholder
          }
          />

        case 'dropdown':
                    return;

      }} < /div> < /div>
  });
},