Karte über Eingang reagieren Checkbox erhalten unerwartetes Token

Question

render() { 
    return (<div> this.list.map(obj => <input value={obj.name} type="checkbox" />)</div>) 
} 

Warum der obige Code nicht funktioniert? habe ein unerwartetes Token erhalten.

Answer 1

Sie haben vergessen, den map Teil in {}, schreiben Sie es so zu wickeln:

render() { 
    return (
     <div> 
     {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)} 
     </div> 
    ) 
} 

eindeutig vergeben key zu jedem Eingabeelement.

Wenn Liste ist eine state Variable dann müssen Sie schreiben this.state.list, nicht sicher über das so den gleichen Code verwendet.

Answer 2

Sie müssen map in die geschweiften Klammern einfügen. Der Code sollte wie folgt sein:

class HelloWidget extends React.Component { 
    constructor(props) { 
     super(props); 
     this.list = [{ 
     "id": "exhibitions", 
     "name": "Exhibitions" 
     }, { 
     "id": "festivals_n_concerts", 
     "name": "Festivals & Concerts" 
     }, { 
     "id": "grand_opening", 
     "name": "Grand Opening" 
     }] 
    } 

    render() { 
     return ( 
     <div> 
      {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)} 
     </div> 
    ) 
    } 


    } 

React.render(<HelloWidget /> , document.getElementById('container')); 

Dies wird funktionieren. Here is the fiddle.