前端笔记之React（一）初识React&组件&JSX语法 - Web

TOP

前端笔记之React（一）初识React&组件&JSX语法(四)

2019-09-17 19:00:37 【大中小】浏览:101次

Tags：前端笔记 React 初识 React& 组件 &JSX 语法

"3">可乐</li> ] return <div> <ul> {arr} </ul> </div> } }

只要你在{}放一个数组，此时这个数组不用循环了，就会自动被展开。

所有的数组元素，必须加上key属性，否则报错

注意：

数组有4项，每项都是jsx元素，不需要加引号

每项必须要有不同的key属性，这是react要求的

数组直接{arr}就可以了，也不需要写循环遍历语句。

数据和DOM怎么进行模板的循环：

arr数组中，没有任何的标签，只是数据：此时就要在{}中用map来映射一个新的数组

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const arr = ["牛奶","咖啡","奶茶","可乐"]
        return <div>
             <ul>
                 {arr.map((item,index)=>{
                    return <li key={index}>{item}</li>
                 })}
             </ul>
        </div>
    }
}

示例代码

映射出一个表格：

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const arr = [
            {"id":1,"name":"小明","age":12,"sex":"男"},
            {"id":2,"name":"小红","age":13,"sex":"女"},
            {"id":3,"name":"小刚","age":14,"sex":"男"},
            {"id":4,"name":"小白","age":15,"sex":"男"}
        ]
        return <div>
             <table>
                 <tbody>
                    {
                        arr.map(item=>{
                            return <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>{item.age}</td>
                                <td>{item.sex}</td>
                            </tr>
                        })
                    }
                 </tbody>
             </table>
        </div>
    }
}

示例代码

3.8九九乘法表

学习的是二维数组的展开

我们先有一个套路，准备一个外层的数组，然后外层的循环中push内部数组：

import React from "react";
export default class App extends React.Component {
    //构造函数
    constructor() {
        super();
    }
    render() {
        var arr = [];
        for(var i = 1;i <= 9;i++){
            var temp = []
            for(var j = 1; j <= i; j++) {
                temp.push(<td key={j}> {i} * {j} = {i*j} </td>)
            }
            arr.push(<tr key={i}>{temp}</tr>)
        }
        return (
            <div>
                 <table>
                    <tbody>
                        {arr}
                    </tbody>
                 </table>
            </div>
        )
    }
};

实力代码

3.9日历

日历的原理，决定一个日历的画风，有三要素：

这个月第一天是星期几；

这个月有几天；

上个月有几天；

要知道2018年5月5日是星期几：
new Date(2018,5-1,5).getDay()

要知道2018年5月有几天：
new Date(2018,5,0).getDate()

本月有几天，等价于下个月前一天是几号，所以下个月的0号，就是本月的最后一天。

给日历加农历：

npm install --save solarlunar

import React from "react";
import solarLunar from 'solarLunar';
export default class App extends React.Component {
    //构造函数
    constructor() {
        super();
    }
    render() {
        var year = 2018;
        var month = 8; //是人类的月份，而不是计算机的
        //本月第一天是星期几
        var TheMonthFirstDay = new Date(year,month - 1,1).getDay();
        //本月共几天
        var TheMonthDays = new Date(year,month,0).getDate();
        //上个月共几天
        var prevMonthDays = new Date(year,month-1,0).getDate();

        var arr = [];
        
        //上个月的尾巴，本月第一天星期几就有几天上个月的尾巴
        while (TheMonthFirstDay--){
            arr.unshift(prevMonthDays--)
        }

        // 本月放进数组
        var count = 1;
        while(TheMonthDays--){
            arr.push(count++);
        }
        // 下个月的前有多少天，要补齐42天
        var nextCount = 1;
        while ( arr.length != 42){
            arr.push(nextCount++);
        }
        console.log(arr)
        //接下来要用这个一维数组集合

首页上一页 1 2 3 4 5 下一页尾页 4/5/5
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：深入V8引擎-Time核心方法之win篇(..	下一篇：前端常见面试题总结1