React 之 组件与语法

作者 糖一瓶 日期 2018-03-25
react jsx
React 之 组件与语法

一、react组件

1.壳子

创建App.js文件，必须按要求书写标准壳，这个壳子叫做rcc壳，react class component，react的类式组件。


    目录结构如下：
    test
     |-node_modules
     |-www
         |-app
           |-main.js
           |-App.js
         |-index.html
     |-webpack.config.js
     |-package.json

App.js代码如下：

import React from "react";

export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        // return后边返回 jsx语法
        return <div>
            <h1>我是App组件，你好！！</h1>
        </div>
    }
}
  • 这个文件的默认暴露就是一个类，这个类的类名必须和文件名相同。
  • 文件名和类名的首字母必须大写！React中一个组件的合法名字的首字母必须是大写字母。
  • 这个类必须继承自React.Component类，也就是说，一个rcc壳必须有extends React.Component的写法。
  • 这个类必须有构造器constructor，构造器里面必须调用超类的构造器，super()；
  • 这个类必须有render函数，render函数中必须return一个jsx对象。同样的，这个jsx对象必须被唯一的标签包裹。

2.使用

使用组件，比如我们现在在main.js中使用组件：
main.js代码如下：

import React from "react";
import ReactDOM from "react-dom";
// 引入App组件
import App from "./App.js";

ReactDOM.render(
    // 使用App组件
    // 复制代码请删掉注释
    <App></App>
    ,
    document.getElementById("app")
);
  • 引入的组件必须路径以./开头
  • 你的组件要使用，就将这个组件的名字（类名、文件名）进行标签化即可。机理就是这个App类在被实例化。

运行：npm run dev
1

react中允许组件套用组件，方法一样，写好rcc壳子，注意一些注意的问题。
然后组件中引入组件，用标签进行实例化。

二、jsx语法

1.使用须知

  • 标签必须严格关闭
  • 标签必须合理嵌套
  • 所有的类名必须用className表示，for用htmlFor表示
    <div className="box"></div>
<label htmlFor=""></label>

2.关于插值

我们可以在jsx的内部，用{}单大括号进行一些js表达式的插入，我们叫做插值。

  • 插值可以怎么写？如下：
import React from "react";

export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){

         const year = 10000;
          const pingfang = (n) => {
        return n * n;
    }
    const arr = [1000 , 2000 , 3000 , 4000];

        return <div>
            <h1>我爱你{5000 * 2}年</h1> // 可以是简单运算
            <h1>我爱你{year}年</h1> // 可以是变量
            <h1>我爱你{pingfang(100)}年</h1>  // 可以是函数的调用
            <h1>我爱你{pingfang(100)}年</h1> // 可以是三元运算
            <h1>我爱你{arr.reduce((a,b)=>a + b)}年</h1> // 可以是表达式级别的函数
            <img src={`/images/${imgtitle}.png`} alt=""/> // 引号内的插值，去掉引号,变为{}，内部继续使用引号拼接字符串。
        </div>
    }
}

  • 不能进行插值的是：

    if语句、for循环、while循环、do……while循环都不行！JSON、数组(数组会自动展开)也不行。
    如果就是想在页面上显示json，要用JSON.stringify(obj)

  • 内嵌样式要求有这样的语法插值：
    style后面直接跟着双大括号，没有引号。
    双大括号里面是标准json，所有的属性名都是驼峰命名法：

    <div style={{"width":"100px","height":"100px","backgroundColor" : "red"}}></div>

3.关于数组的自动展开

  1. 数组自动展开演示
import React from "react";

export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        const arr = [
            <li key="0">牛奶</li>, 
            <li key="1">咖啡</li>, 
            <li key="2">奶茶</li>, 
            <li key="3">可乐</li>
        ];

        return <div>
           <ul>
               {arr}
           </ul>
        </div>
    }
}

注意：
1）数组有4项，每项都是jsx元素，不需要引号的；
2）每一个项必须要有不同key属性，这是react要求可以不是数字；
3）数组直接{arr}写就行了，不需要双大括号、也不需要遍历。

2

  1. 结合map映射映射一个表格

工作中不会有人给你一个带有标签的数组，都是给你一个数组装有各种数据如下：

一个简单的表格：

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" : 11 , "sex" : "男"},
            {"id" : 4 , "name" : "小强" , "age" : 9  , "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>
    }
}

九九乘法表：

import React from "react";

export default class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        const multiplication = () => {
            var arr = [];
            for(var i = 1 ; i <= 9 ; i++){
                var temp = [];
                for (var j = 1; j <= 9; j++) {
                    temp.push(<td key={j}>{j} * {i} = {i * j}</td>)
                }
                arr.push(<tr key={i}>{temp}</tr>)
            }
            return arr;
        }

        return <div>
            <table>
                <tbody>
                    {multiplication()}
                </tbody>
            </table>
        </div>
    }
}

3

4.将一维数组转换为二维数组

  • 一个月的月历长成什么样，由三个要素决定：
    • 本月1号星期几
    • 上月有几天
    • 本月有几天

小技巧：
比如，我们想知道2018年3月有几天，直接让机器算2018年的4月的0号即可。
计算机上月份是从0-11的对应真实月份的1-12月所以计算机上3就是四月
四月的第0天就是三月的最后一天
4

快速生成某月日历：

 import React from "react";

export default class App extends React.Component{
    constructor(){
        super();

    }

    render(){
        const showrili = () => {
            var arr = [];
            var year = 2018;
            var month = 3;      //真实月份，从一月开始的真实月份，我们想得到的三月的日历
            //三要素
            //本月1号星期几
            var benyueyihaoxingqiji = new Date(year , month - 1 , 1).getDay();  //getDay()表示得到星期
            //本月有几天
            var benyueyoujitian = new Date(year , month - 1 + 1 , 0).getDate();
            //上月有几天
            var shangyueyoujitian = new Date(year , month - 1 , 0).getDate();

            //组建一个一维数组
            var _arr = [];
            //本月1号星期几，就要往数组中放入几天上个月的尾巴。
            for (var i = 0 ; i < benyueyihaoxingqiji ; i++){
                _arr.unshift(shangyueyoujitian - i);
            }
            //本月有几天，数组中就要放入几天这个月
            for(var i = 1 ; i <= benyueyoujitian ; i++){
                _arr.push(i);
            }
            //凑满42项
            var count = 1;
            while(_arr.length != 42){
                _arr.push(count++);
            }


            //将一个一维数组，变为二维数组
            for(var i = 0 ; i < 6 ; i++){
                arr.push(
                    <tr key={i}>
                        {
                            _arr.slice(i * 7 , i * 7 + 7).map((item,index)=>{
                                return <td key={index}>{item}</td>
                            })
                        }
                    </tr>
                )
            }

            return arr;
        }

        return <div>

            <table>
                <tbody>
                    {showrili()}
                </tbody>
            </table>
        </div>
    }
}

未完待续……

FEATURED TAGS
react jsx