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

创建时间：2017-08-17 投稿人：浏览次数：204

<!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文件夹中，这两个是同级文件夹。

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

热门文章: CTF writeup 2_南邮网络攻防训...; SSM框架——详细整合教程（...; Linux Shell脚本编程－－curl命...; HttpClient使用详解; Java面试题全集（上）; JAVA设计模式之单例模式; java.lang.OutOfMemoryError: PermGen ...; TCP协议中的三次握手和四次...; form表单的两种提交方式，su...; String,StringBuffer与StringBuilder...

最新文章: Java之品优购课程讲义_day20（7）; 剑指 Offer - 8：跳台阶; Netty权威指南_札记02_NIO编程; mysql时间属性之时间戳和datetime之...; 虚拟现实或许可以拯救古埃及的“...; spring cloud服务注册中心eureka---集群...; Java SE 第六章; HTTP请求+数据库; HIDL学习笔记之HIDL C++（第二天）; ubuntu系统下指定tomcat运行时为JDK1.8...

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

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