webpack学习（六）—webpack+react+es6（第2篇）

  • Z时代
  • 2024-01-10
  • 分类：综合

react

接上篇        webpack学习（五）—webpack+react+es6（第1篇）

本文做个简单的图片加文字的页面。其中，配置文件跟上篇一致。项目结构：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.img{width:300px;height:100px;}
	</style>
</head>
<body>
	<div ></div>
	<script src="build/bundle.js"></script>
</body>
</html>

　　

src/js/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import ImgDemo from './imgDemo';
//模拟服务器传过来的数据
var dataList=[  
	  {
	  	'img':'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png',
	  	'word':'百度的图标'
	  },
	  {
	  	'img':'https://www.sogou.com/web/img/logo128_50x2.png',
	  	'word':'搜狗的图标'
	  }
  ];
ReactDOM.render(
	<ImgDemo data={dataList}/>,
	document.getElementById('imgDemo')
	)

src/js/imgDemo.js

import React from 'react';
import OneImg from './oneImg'
class ImgDemo extends React.Component{
  render() {
    // 遍历后端给的数据，并且插入
    return <div>
       {
	       	this.props.data.map((arr,index)=>
	      		<OneImg oneData={arr} key={index}/>
	    	)
   		}
     </div>;
  }
}
module.exports =  ImgDemo

src/js/oneImg.js

import React from 'react';
class OneImg extends React.Component{
	render(){
		var oneData = this.props.oneData;
		return <div>
			<img className='img' src={oneData.img}/>
			<p>{oneData.word}</p>
		</div>
	}
}
module.exports = OneImg

其中，package.json、webpack.config.js跟上篇一致。这里不再列出。

安装: npm init

启动：npm run dev

项目地址：http://localhost:8080/index.html

注意：声明class，类名首字母需要大写，小写的话根本不走这个class。

以下的是废话，可以不看。。。

------------------

这里思考个问题：

上面的src/js/imgDemo.js是ES6的写法，如果用ES5，render()函数我们会怎么写？

  render() {
    // 遍历后端给的数据，并且插入
    return <div>
       {
	       	this.props.data.map(function(arr,index){ 
	      		return <OneImg oneData={arr} key={index}/>
          }
	    	)
   		}
     </div>;
  }

ES5到ES6,唯一的区别是将匿名函数变成了箭头函数。当然，还可以把{}里的作为一个变量申明。

   render() {
    // 遍历后端给的数据，并且插入
    var oneWBNodes = this.props.data.map(function(aWB,index){
      return <OneImg oneData={aWB} key={index}/>;
    });
    return <div>
        {oneWBNodes}
     </div>;
  }

还是箭头函数简单。推荐箭头函数（ES6新加入的）

还有个问题：为什么用{}?

网上的解释：我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中，jsx用js的语法解析。

以上是 webpack学习（六）—webpack+react+es6（第2篇） 的全部内容， 来源链接： utcz.com/z/381755.html

回到顶部