React 基本语法

目录

一、组件的使用

1.1 声明组件

1.2 挂载组件

二、在组件里声明数据及绑定数据

三、在组件中绑定属性

四、引入图片

 

---

一、组件的使用

1.1 声明组件

有俩种写法

写法一：在components组件中新建Home. js 文件

import React,{Component} from "react";

//声明组件的类
class Home extends Component{
    render(){
        return  <div>我是Home组件</div>
    }
}
export default Home;

写法二：在components组件中新建Cart. js 文件

import React from "react";
class Cart extends React.Component {
    render() {
        return (
           <div>我是Cart组件</div>
        )
    }
}

export default Cart;

 提示：可安装插件React-Native/React/Redux snippets for es6/es7    输入cccs自动生成开发模板
           在vsCode种写代码没智能提示 ：添加typings扩展组件

1.2 挂载组件

先导入组件，在使用组件（与vue的区别就是，不用注册组件）

//引入react对象，import后边的声明：React是整个react对象（当前对象的属性）
import React, { Component } from 'react';
//引入当前组件的的css脚本
import '../assets/css/App.css';

//导入其他组件  (声明 导入 使用)
import Home from "./Home.js"
import Cart from "./Cart.js"

//ES6中的类继承写法
//class声明类   extends继承
class App extends Component {
  //render方法值渲染模板界面    有返回值且返回的是一个对象， render  里面的元素只能有一个根节点
  render() {
    return (
      <div className="App">
      <span>我是App组件</span>
       <Home></Home>
       <Cart/>
      </div>
    );
  }
}
//将App组件暴露
export default App;

二、在组件里声明数据及绑定数据

绑定普通数据，数据，数据元素集合，数据遍历使用map方法，{}绑定数据

注意： 遍历数组 不能使用foreach，因为它没有返回对象不能渲染到界面上，用map映射 

import React, { Component } from "react";

//声明组件的类
class Home extends Component {
    //绑数据   普通值  数组 对象  枚举对象+元素
    constructor() {
        super();
        this.state = {
            msg: "我是Home组件",
            arr: [1, 2, 3, 4, 5, 6],
            ele: [{
                    a: <span>1</span>
                },
                {
                    a: <span>2</span>
                },
                {
                    a: <span>3</span>
                }
            ]
        }
    }
    render() {
        return ( 
        <div> 
        { this.state.msg } 
        <span > 遍历数组</span> 
        <ul> {
                this.state.arr.map(function(value, index) {
                    return ( 
                        <li key = { index } > { value } </li>
                    )
                })
            } 
        </ul> 
            <span> 绑定数组 + 元素集合 </span>
             <ul> {
                this.state.ele.map(function(value, index) {
                    return ( 
                        <li key = { index } > { value.a } </li>
                    )
                })
            } </ul> 
            </div>
        )
    }
}
export default Home;

知识补充：

• constructor( )——构造方法

       这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

• super( ) ——继承

      在class方法中，继承是使用 extends 关键字来实现的。子类必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。

      报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。

三、在组件中绑定属性，设置自定义属性

绑定元素属性，元素类名称，元素行内样式

import React, { Component } from "react";

//声明组件的类
class Home extends Component {
    //绑数据   普通值  数组 对象  枚举对象+元素
    constructor() {
        super();
        this.state = {
            msg: "我是Home组件", 
            title:"Home",
            isadd:"color",
            bg:{
                width:"3rem",
                height:"3rem",
                background:"blue"
            }
        }
    }
    render() {
        return ( 
        <div> 
        { this.state.msg } 
       <span>绑定元素的属性</span>
       <div title="Home"></div>
       <div title={this.state.title}></div>
       <span>绑定元素类名称</span>
       <div className="bg"></div>
       <div className={this.state.isadd}></div>
       <div className={true?this.state.isadd:""}></div>

        {/* js里面的for  和  html 元素的for 相同  (for 属性规定 label 与哪个表单元素绑定) htmlFor */}
        <label htmlFor="">文本框</label>
        {/* 
             动态绑定行内样式  必须写成对象的形式
             style={{width: '3em',height: '3em'}}
             值可以做成拼接值
        */}
        <div style={{width:"3em",height:"2em",border:"1px solid red"}}></div>
        <div style={this.state.bg}></div>


  </div>
        )
    }
}
export default Home;

通过getAttribute获取自定义属性 

import React,{Component} from "react"
class Event extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"我是Event组件",
         };
    }

    //设置自定义属性
    //捕获当前事件作用的对象   IE:event.srcElement    firefox:event.target
    databtn=(e)=>{
        let target =e.srcElement||e.target;
        let  res=target.getAttribute("data-id");
        console.log(res);
    }

    render() {
        return (
           <div>
             {this.state.msg}
             <button data-id="123" onClick={this.databtn}>设置自定义属性</button>

           </div> 
        );
    }
}

export default Event;

四、引入图片

引入图片的俩种方式，远程图片，本地图片（包括import导入和require请求俩种）

import React from "react";
//导入本地图片
import image from "../assets/images/t01c38ff1a84f652273.webp.jpg"


class Cart extends React.Component {
    constructor(){
        super();
        this.state={
            msg:" 我是Cart组件",
            imgsrc:"https://ps.ssl.qhimg.com/sdmt/250_162_100/t01e3556f4e20d58419.webp"
        }
    }
    render() {
        return (
           <div>
                {/* 导入远程图片  必须要有alt属性 */}
              <img src={this.state.imgsrc} alt=""/>

              {/* 导入本地图片俩种方法   require动态请求服务上的资源*/}
              <img src={require("../assets/images/t01c38ff1a84f652273.webp.jpg")} alt=""></img>

             {/* import导入本地图片 */}
             <img src={image} alt=""/>
           </div>
        )
    }
}
export default Cart;