map Bilder verketten Zeichenfolgen

Question

Ich verwende die map Funktion, um über ein Array mit Bildern zu iterieren. Ich versuche dann, diese Bilder auf der Seite anzuzeigen.

Sie werden sehen, dass die Bilder zu einem Fleck verkettet werden. Weiß jemand, wie man das macht, damit ich jedes einzelne Bild zeigen kann?

I have set up a jsfiddle here

Bitte siehe unten Reagieren Code:

var App = React.createClass({ 
    render: function(){ 
    var images = [ 
     { 
      id:"1", 
      images:['https://i.scdn.co/image/dc284fcd7e581aa2b7ca56f28c7c74f0ca0ad393', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7'] 
     }, 
     { 
      id:"2", 
      images:['https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7'] 
     } 
     ]; 
     return(<List images={images} />) 
    } 
}); 

var List = React.createClass({ 
    render: function() { 
     var images = this.props.images.map(function(image){ 
      return(image.images[0]); // updated here 
     }) 
     return(
      <div> 
       <img src={images}></img> 
       <p>{images}</p> 
      </div> 
     )  
    } 
}); 

ReactDOM.render(
    <App name="World" />, 
    document.getElementById('container') 
); 

Answer 1

Ist die folgende Arbeit?

 var images = this.props.images.map(function(image, index){ 
      return <img key={index} src={(image.images[0])} />; 
     }); 

Auch Sie jetzt brauchen nicht die <img /> Tag in Ihrem letzten return Anweisung: auf die URL gesetzt https://jsfiddle.net/petebere/19fmn5qs/

Das war die Veränderung der <img />-Tag mit dem src Attribut hinzufügen. Bitte sehen Sie meine aktualisierte Geige. Außerdem habe ich den Schlüssel Attribut wie in der Dokumentation Reagieren erforderlich: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Voll Code:

var App = React.createClass({ 
    render: function() { 
     var images = [ 
     { 
      id:"1", 
      images:['https://i.scdn.co/image/dc284fcd7e581aa2b7ca56f28c7c74f0ca0ad393', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7'] 
     }, 
     { 
      id:"2", 
      images:['https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7'] 
     } 
     ]; 

    return(<List images={images} />); 
    } 
}); 

var List = React.createClass({ 
    render: function() { 
     var images = this.props.images.map(function(image, index){ 
      return <img key={index} src={(image.images[0])} />; 
     }); 
     return(
      <div> 
       <p>Your images</p> 
       {images}    
      </div> 
     );  
    } 
}); 

ReactDOM.render(
    <App name="World" />, 
    document.getElementById('container') 
);