React map遍历数组批量传入图片

来源：互联网发布：广州网络114 编辑：程序博客网时间：2024/06/06 08:54

<!DOCTYPE html>

<html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>  <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body>  <div id="example"></div>  <script type="text/babel">    var HelloMessage = React.createClass({      render: function() {      //图片地址      let arr = ["../img/1.png","../img/2.png","../img/3.png","../img/4.png","../img/5.png",                 "../img/6.png","../img/7.png","../img/8.png","../img/9.png","../img/10.png",                "../img/11.png","../img/12.png","../img/13.png","../img/14.png","../img/15.png"];      let word = ["Tom","Jack","Roman","Aaron","Abbot",                  "Abel","Adolph","Alan","Aries","Barret",                  "Bart","Beck","Chester","Clark","Don"];      let list;      //遍历数组      list = arr.map(function(value,index){      return (<li><img src={value}/></li>);      })       return (          <ol>{list}</ol>      );    }  });  ReactDOM.render(    <HelloMessage />,    document.getElementById('example')  );    </script></body></html>

首先我将所有图片放置在img文件夹中，网页放置在html文件夹中，这两个是同级文件夹。

阅读全文

1 0

React map遍历数组 批量传入图片

React map遍历数组批量传入图片