JSX语法，箭头函数和map遍历数组，{}接收变量内容，模板字符串，等比缩小【诗书画唱】

2021-04-29 16:19 作者:诗书画唱 0人读过 | 我要投稿

目录：

作业

个人注释

第1题的注释

”{变量名}“的格式插入HTML标签中，就是接收js中的变量的内容，不加{}就是接收变量名，而不是接收变量的内容。{}常常用于接收变量的内容。字符串拼接常常用到模板字符串（`${}`)。

第三题的解析

<style>

img{

width: auto;

height: 100px;

}

</style>就类似于等比缩小图片的作用。

JSX语法的很多代码例子

if语句.html

JSX表达式.html

{}中可以显示值类型的变量和数组的内容，但是不能够显示普通对象，

变量的值如果是布尔类型或者是null和undefined，那么不会显示任何内容

JSX数组.html

JSX元素添加样式.html

JSX注释.html

引用外部的JSX文件.html

预备知识.html

数组的map方法

let newArr = arr.map(i => i * 3);

console.log(newArr);

let books = ['西游记','三国演义','水浒传','红楼梦'];

let newBooks = books.map(str => '《' + str + '》');

console.log(newBooks);

作业

1、let data = ['语文','数学','英语'];

通过map方法将数组中的内容显示为一个列表

<!DOCTYPE html>

<html>

<head>

let data = ['语文','数学','英语'];

let Newdata= data.map(name => (

));

ReactDOM.render(<ul>{Newdata}</ul>,document.getElementById('id1'));

</script>

</head>

<body>

</body>

</html>

2、let data = [{name:'六神',price:'9.6'},{name:'辣条',price:'4.6'}];

通过map方法将数组中的内容显示为一个表格。

<!DOCTYPE html>

<html>

<head>

let data = [{name:'六神',price:'9.6'},{name:'辣条',price:'4.6'}];

let Newdata= data.map(o => (<tr key={o.name} >

<td>{o.price}</td>

</tr>));

ReactDOM.render(<tbody>{Newdata}</tbody>,document.getElementById('id1'));

</script>

</head>

<body>

</body>

</html>

3、let data = ['img/1.png','img/2.png','img/3.png'];

通过map方法将数组中的内容显示为图片列表。

<!DOCTYPE html>

<html>

<head>

let data = ['img/1.png','img/2.png','img/3.png'];

let Newdata= data.map(o => (

<li>

</li>

));

ReactDOM.render(<ul>{Newdata}</ul>,document.getElementById('id1'));

</script>

<style>

img{

width: auto;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

个人注释

第1题的注释：

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

map方法有返回值，返回值用变量接收。

使用map遍历数组等时，最好要声明key的值。{}就ES6语法中接收变量等等的。

”{变量名}“的格式插入HTML标签中，就是接收js中的变量的内容，不加{}就是接收变量名，而不是接收变量的内容。{}常常用于接收变量的内容。字符串拼接常常用到模板字符串（`${}`)。

第三题的解析

<style>

img{

width: auto;

height: 100px;

}

</style>就类似于等比缩小的作用。

JSX语法的很多代码例子

<!DOCTYPE html>

<html>

<head>

// function judgeNum(num){

//// if(num % 2 == 0) {

//// return <strong>{num}是一个偶数</strong>;

//// }else {

//// return <em>{num}是一个奇数</em>;

//// }

// return num % 2 == 0 ? <strong>{num}是一个偶数</strong> :

// <em>{num}是一个奇数</em>;

// }

// ReactDOM.render(judgeNum(3),document.getElementById('app'));

let judgeNum = num => num % 2 == 0 ? <strong>{num}是一个偶数</strong> : <em>{num}是一个奇数</em>;

ReactDOM.render(judgeNum(5),document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

let num = 36;

let msg = 0;

//{}中可以显示值类型的变量和数组的内容，但是不能够显示普通对象

let stu = {name: 'Tom'};

let arr = ['你好',stu.name,'!'];

{}中可以显示值类型的变量和数组的内容，但是不能够显示普通对象，

变量的值如果是布尔类型或者是null和undefined，那么不会显示任何内容

let b1 = false;

let b2 = true;

let a;

let b = null;

ReactDOM.render(<h1>

<p>{msg || '没有可以显示的内容'}</p>

</h1>,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

let pros = [

{id: 1,pname: '巧克力',price: 8.5,unit: '块'},

{id: 5,pname: '辣条',price: 4.5,unit: '包'},

{id: 8,pname: '爆米花',price: 12,unit: '桶'}

];

// let items = [];

// for(let p of pros) {

// let i = (<tr>

// <td>{p.id}</td>

// <td>{p.pname}</td>

// <td>人民币{p.price}</td>

// <td>{p.unit}</td>

// </tr>);

// //将i元素放到items数组的尾部

// items.push(i);

// }

let items = pros.map(p => (<tr key={p.id} >

<td>{p.pname}</td>

<td>人民币{p.price}</td>

</tr>));

ReactDOM.render(<tbody>{items}</tbody>,document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//设置P元素的字体颜色是红色，字体大小是50px

//属性都是驼峰式命名方式

let myStyle = {

color: 'red',

fontSize: '50px',

backgroundColor: 'blue'

};

ReactDOM.render(<p style={myStyle} >测试文字</p>,document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//注释

let e = <h1>{/*HTML中的注释*/}Hello world</h1>;

ReactDOM.render(e,document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

//js/my.js

ReactDOM.render(<h1>Hello world</h1>,

document.getElementById('app'));

<!DOCTYPE html>

<html>

<head>

//数组的map方法

let arr = [1,2,3];

// let newArr = [];

// for(let i = 0;i < arr.length;i ++) {

// newArr[i] = arr[i] * 3;

// }

//item:当前的元素

//index:当前元素的下标

// let newArr = arr.map(function(item){

// return item * 3;

// });

let newArr = arr.map(i => i * 3);

console.log(newArr);

let books = ['西游记','三国演义','水浒传','红楼梦'];

// let newBooks = books.map(function(item){

// return '《' + item + '》';

// });

let newBooks = books.map(str => '《' + str + '》');

console.log(newBooks);

</script>

</head>

<body>

</body>

</html>

标签：

JSX语法，箭头函数和map遍历数组，{}接收变量内容，模板字符串，等比缩小【诗书画唱】

作业

个人注释

第三题的解析

JSX语法的很多代码例子