我有一个json，我正在尝试使用json数据显示表单。我尝试使用Switch case显示索引，因此基于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
使用上面的代码我得到一个错误＆＃34; Unexpexcted token＆＃34;并且错误指向＆＃34; case＆＃34;。任何人都可以帮助解决问题，我是新的反应，我无法解决这个问题。代码中有语法错误吗？
答案 0 :(得分：1)
因为忘了放{}，所以请使用：
<div>
{
}
要使用javascript元素中的任何HTML代码，我们需要使用{}。
注意：我们无法在if-else/switch内直接使用JSX语句，使用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'/>
答案 1 :(得分：0)
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>
});
},