Listenelemente, die nicht in React rendern

Question

Dies ist meine Sidebar-Komponente.

const Sidebar = React.createClass({ 
    render(){ 
    let props = this.props; 
    return(
     <div className= 'row'> 
     <h2>All Rooms</h2> 
     <ul> 
      {props.rooms.map((room, i) => { 
      <li key={i}> {room.name} </li> 
      })} 
     </ul> 
     {props.addingRoom && <input ref='add' />} 
     </div> 

    ); 
    } 
}) 

Dies ist, wo ich render es ein Zimmer bevölkern.

ReactDOM.render(<App> 
    <Sidebar rooms={[ { name: 'First Room'} ]} addingRoom={true} /> 
    </App>, document.getElementById('root')); 

Der Inhalt innerhalb des <ul></ul> Render-Tag überhaupt nicht. Irgendeine Idee, was ich vermissen könnte.

Answer 1

Sie geben nichts von der map-Funktion zurück, sodass in der ungeordneten Liste nichts angezeigt wird. In Ihrem arrow function, tun Sie:

(room, i) => { 
    //statements 
} 

Dieses nichts zurückliefert. Array.prototype.map erfordert einen Rückruf, der einen Wert zurückgibt, um irgendetwas zu tun. map Elemente in das Array umwandeln, Mapping (Ausführen) der Rückruf für jedes Element. Der Rückgabewert ist der Wert an der entsprechenden Position im zurückgegebenen und zugeordneten Array.

Sie müssen das Listenelement in der map Funktion wie so zurück:

<ul> 
    {props.rooms.map((room, i) => { 
     return <li key={i}> {room.name} </li>; 
    })} 
</ul> 

Nun wird die abgebildete Anordnung von Listenelementen gemacht, weil die Liste Element zurückgegeben.

Um dies zu verkürzen, können Sie es in Form (params) => value schreiben können, die auf die oben äquivalent ist, wo value der zurückgegebene Wert, etwa so:

{props.room.map((room, i) => <li key={i}> {room.name} </li>)}