目录
一、组件的使用
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;