js命名规则：
只能由字母，数字，下划线和$符号组件
$count
第一个字符不能是数字 235count
命名不能用关键字和保留字 if,for,let
React 绑定this的正确方式 ？？？
1.<button onClick={ this.play.bind(this,参数1,参数2,参数n) } > 点击</button>
-
jsx中这样写：
第一步： <button onClick={ this.play } > 点击</button>
第二步：在constructor中定义this.play=this.play.bind(this,,参数1,参数2,参数n);
3.箭头函数写法
<button onClick={ (e)=>{ this.play(e,参数1,参数2,参数n) } } > 点击</button>
4.直接将函数写成箭头函数形式
例如：
<button onClick={ this.play } > 点击</button>
play=(a,b,c) =>{
console.log('balabalabal',this)
// alert(c.target.innerHTML)
}
有三种绑定方式：
定义初始数据的方式
1.在constrctor中定义
constructor() {
super();
this.state={
n:1
}
}
2. state={
n:1
}
React快捷命令：
imr Import React
imrc Import React / Component
impt Import PropTypes
impc Import React / PureComponent
cc Class Component
ccc Class Component With Constructor
cdm componentDidMount
cwm componentWillMount
cwrp componentWillReceiveProps
scu shouldComponentUpdate
cwu componentWillUpdate
cdu componentDidUpdate
cwu componentWillUpdate
基于React的一款轮播插件的使用 (react-id-swiper)
文档：https://github.com/kidjp85/react-id-swiper
效果源码：http://kidjp85.github.io/react-id-swiper/
第一步：安装react-id-swiper
npm install react-id-swiper
第二步：创建一个轮播组件并引入react-id-swiper
import Swiper from 'react-id-swiper';
import './indexStyle.css'
第三步：在render函数中写轮播代码
例如：
class LunBoCom extends Component {
state = { }
render() {
//轮播要配置的参数
const params = {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
spaceBetween: 30
}
return (
//...params表示应用上面的轮播配置参数
<Swiper { ...params }>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
);
}}
图片的引入
写到public目录中，可以通过绝对地址访问
children
相当于vue中的slot
在react中的用this.props.children来获取，并且children返回是一个数组
ref
用于访问dom操作，类似于vue的ref
用ref命名， <div ref="box">商品内容</div>
获取： this.refs.box
