Bedingtes gesetzt Checkbox Zustand basierend auf Variable in ReactJS

Question

class Example extends React.Component { 
    constructor() { 
     super(); 
     this.isChecked = this.isChecked.bind(this); 
    } 

    isChecked(ex){ 
     return this.props.defaults && $.inArray(ex, this.props.defaults); 
    } 

    render() { 
     return (
      <div className="example"> 
      {this.props.items.map(item => (
        var checked = this.isChecked({item.type}); 

        <span key={item.type}> 
         <input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} /> 
         <label htmlFor={item.type}>{item.display}</label> 
        </span> 
      ))} 
      </div> 
     ); 
     } 
} 

Im obigen Beispiel, ich habe eine Liste der Elemente auf die Komponente this.props.items und eine Liste der Standardwerte this.props.defaults geben. Wenn das Element in der Liste der Standardwerte für jedes Element ist, möchte ich seinen Status checked sein. Lassen Sie das Gesamtdesign gleich, wie kann ich das tun? (Hinweis: Mir ist klar, dass ich die Anwendung neu gestalten kann, um zu vermeiden, dass die Variable in der Map deklariert wird. Das ist nicht die Frage).

Der obige Code funktioniert nicht (offensichtlich), ich versuche nur, jedem eine Vorstellung davon zu geben, was ich hier versuche. Der Fehler, der gegeben wird, wenn Sie das ausführen, ist etwas wie "unerwartetes Token" an der Stelle, an der "var" deklariert wird.

Answer 1

die render Methode hatte einige Syntaxfehler, dies sollte funktionieren:

render() { 
    return (
     <div className="example"> 
     {this.props.items.map((item) => { 
       var checked = this.isChecked(item.type); 
            return (
        <span key={item.type}> 
         <input type="checkbox" checked={checked ? 'checked' : ''} name="example" value={item.type} id={item.type} /> 
         <label htmlFor={item.type}>{item.display}</label> 
        </span> 
       ) 
     })} 
     </div> 
    ); 
    } 

Den Hauptfehler die Funktion in der Karte wurde erklärt, Sie Artikel in Pars wickeln haben und die Funktion mit Klammern statt Pars umgeben. Wenn eine Fettpfeilfunktion nur eine Anweisung enthält, müssen Sie return nicht angeben. Aber in diesem Fall haben Sie die var checked Zeile hinzugefügt, so dass Sie nun die andere Zeile explizit zu einer return Anweisung machen müssen. Es gab auch ein Problem mit der Einstellung checked im Eingang. Ich hoffe, das hilft!