一、声明组件
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;
2.组件的挂载
在App.js根组件中引入Home、Cart组件:
//引入react对象 import后面的声明 React是整个react对象;{}里面是当前对象里面的属性
import React, { Component } from 'react';
//引入当前组件使用的css脚本
import '../assets/css/App.css';
//引入组件
import Home from './Home';
import Cart from './Cart';
//es6里面的类语法
//声明App这个类 extends继承Component
class App extends Component {
//render方法指渲染模板页面;方法里有返回值,返回对象,对象里面写模板(元素);里面的元素只能有一个根节点
render() {
return (
<div className="App">
<span>我是App组件</span>
<Home></Home>
<Cart/>
</div>
);
}
}
//将App组件进行暴露
export default App;
注:在vsCode种写代码没智能提示 :添加typings扩展组件
二、在组件里声明数据及绑定数据
import React,{Component} from 'react';
//声明组件的类
class Home extends Component{
//声明类的构造函数
constructor(){
//super 完全继承,将Component里的完全继承过来;从父元素继承this指针下来
//不写super 子类没有自己的this指针 必须来自于继承的父类
super();
//给当前类声明属性(对象集合)
this.state={
msg:"我是Home组件",
arr:[1,2,3,4,5,6],
ele:[
{
e:<span>1</span>
},
{
e:<span>2</span>
},
{
e:<span>3</span>
}
]
}
}
render() {
return(
<div>
<span>数据的绑定</span>
<br/>
{/* 普通数据绑定 */}
{this.state.msg}
<br/>
{/* 数组绑定 */}
<ul>
{
this.state.arr.map(function(value,index){
return (
<li key={index}>{value}</li>
)
})
}
<br/>
{/* 数组+元素集合绑定 */}
<ul>
{
this.state.ele.map(function(value,index){
return(
<li key={index}>{value.e}</li>
)
})
}
</ul>
</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={
title:"我是div",
isadd:"addColor",
bg:{
color:'red'
}
}
}
render() {
return(
<div>
<span>绑定元素的属性</span>
<br/>
{/* 普通属性的绑定 */}
<div title={this.state.title}>绑定title属性</div>
<br/>
{/* 绑定特殊属性 和 js里面冲突的一些属性 */}
{/* class属性和上面类的关键字冲突 必须换为className */}
<div className="bg">绑定class属性</div>
{/* 动态绑定className */}
<div className={true?this.state.isadd:""}>动态绑定class</div>
<br/>
{/* for属性 和 js里面的for循环一样 */}
<label htmlFor="name">绑定for</label>
{/* 绑定style属性 */}
<div style={{width:'3rem',height:'3rem'}}></div>
<div style={this.state.bg}></div>
</div>
)
}
}
export default Home;
四、图片的src引入问题
import React from 'react';
//进行图片的引入
import imgs from '../assets/image/11.jpg'
class Cart extends React.Component {
constructor(){
super();
this.state={
imgsrc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1840587501,62677872&fm=27&gp=0.jpg"
}
}
render() {
return (
<div>
我是Cart组件
<hr/>
{/* 引入远程图片的src */}
<img src={this.state.imgsrc} alt=""/>
{/* 引入本地图片路径 require是去服务端找图片路径,把它请求下来,拿来使用*/}
<img src={require("../assets/image/11.jpg")} alt=""/>
{/* 在上面进行图片的引入 */}
<img src={imgs} alt=""/>
</div>
);
}
}
export default Cart;
五、数组遍历和元素的绑定问题
import React from 'react';
class Cart extends React.Component {
constructor(){
super();
this.state={
arr:[1,2,3,4],
ele:[<div>1</div>,<div>2</div>],
list:[
{txtvalue:"你好"},
{txtvalue:"你好"},
{txtvalue:"你好"}
]
}
}
render() {
return (
<div>
<ul>
{
// foreach不行,因为其没有返回值;map为元素的映射,有返回值
this.state.arr.map((value,index)=>{
return(
<li key={index}>{value}</li>
)
})
}
</ul>
<ul>
{
this.state.ele.map((value,index)=>{
return(
<span key={index}>{value}</span>
)
})
}
</ul>
<ul>
{
this.state.list.map((value,index)=>{
return(
<li key={index}>{value.txtvalue}</li>
)
})
}
</ul>
</div>
);
}
}
export default Cart;