0
jsonがあり、jsonデータを使用してフォームを表示しようとしています。私はスイッチのケースを使用してインデックスを表示しようとしたので、htmlコントロールタイプに基づいてインデックスが表示されます。以下は、上記のコードImは誤り「Unexpexctedトークン」を取得し、エラーが「ケース」の方を向いていると私のコードReactjsでスイッチケースが動作しない
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
です。誰もがこの問題を解決することはできませんImが反応する新しいとイム、問題を解決するのに役立ちます。コード内の任意の構文エラー？
括弧内になければならないが、それでも私は」：実施例http://reactjs.cn/react/tips/if-else-in-JSX.html
チェックmは同じERROを取得しますrを指し、「スイッチ」を指す。 – knbibin
更新されたコードをチェックし、上記のスニペットを実行し、スイッチを使用することはできません。あるいは、jsxの中で直接関数を呼び出して、その中でその部分を行います:) –
ありがとうございました...それは働いています:) – knbibin