映射图像连接字符串

Question

我使用map函数迭代数组中的图像。然后，我试图在页面上显示这些图像。

您将看到图像被串联成一个污点。有人知道怎么做吗?这样我就可以显示每个人的图像了吗？

我在这里做了个小摆设

请参见下面的“反应代码”：

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

以下是工作吗？https://jsfiddle.net/petebere/19fmn5qs/

更改是将设置了<img />属性的src标记添加到url：

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

另外，您现在不需要在最后一个<img />语句中使用return标记。请看我最新的小提琴。我还按照React中的要求添加了关键属性：https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

完整代码：

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')
);