Switch-Gehäuse funktioniert nicht in Reactjs

Ich habe ein JSON und ich versuche, ein Formular mit den JSON-Daten anzuzeigen. Ich habe versucht, die Indizes mit dem Schalter Fall anzuzeigen, also basierend auf dem HTML-Steuerelementtyp wird der Index angezeigt. Unten ist mein CodeSwitch-Gehäuse funktioniert nicht in 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

Mit dem obigen Code Im einen Fehler „Unexpexcted Token“ und der Fehler zeigt auf den „Fall“ zu bekommen. Kann jemand helfen, das Problem zu lösen, ich bin neu zu reagieren und ich bin nicht in der Lage, dieses Problem zu lösen. Irgendwelche Syntaxfehler im Code?

Quelle

2017-03-22 knbibin

Weil Sie {} zu setzen vergessen haben, verwenden Sie diese:

<div> 
{ 

}

zu verwenden, um alle javascript Code innerhalb HTML Element brauchen wir {} zu verwenden.

Hinweis: Wir können nicht direkt if-else/switch Anweisung innerhalb JSX verwenden, verwenden Sie entweder ternary operator oder eine Funktion aus JSX anrufen und if-else/switch innen verwendet diesen.

Referenz: http://reactjs.cn/react/tips/if-else-in-JSX.html

Überprüfen Sie die Arbeitsbeispiel:

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'/>

Quelle

2017-03-22 06:58:32

ich hinzugefügt haben, {} sein sollte, aber ich immer noch Ich bekomme den gleichen Fehler r und zeigt auf "Switch". – knbibin

überprüfen Sie den aktualisierten Code, führen Sie das oben genannte Snippet, können wir nicht verwenden Schalter oder wenn direkt in jsx, rufen Sie eine Funktion und machen Sie diesen Teil innerhalb der :) –

Vielen Dank ... Es funktioniert :) – knbibin

swithc-case in Klammern

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> 
    }); 
},

Quelle

2017-03-22 07:00:03

Switch-Gehäuse funktioniert nicht in Reactjs

Antwort

Verwandte Themen