一起来学React吧(2018.7.10——5)
本人已经入职,公司前端使用React,作为一名小白还是要从头学起。
又回到React
昨天搞了一大堆,React Native安装了一个下午,结果今天clone下公司的代码之后,我整个人都不好了。并没有用React Native而是用的React做适配手机端的方法,这可能也是业务需要吧,那就回来学React吧。
一个小Demo
吃完晚饭,先来无事,做了个xxoo小游戏。
import React,{Component} from 'react'
class LittleKuai extends Component{
constructor(props){
super(props);
this.state={
number:this.props.number,
isCircle:this.props.isCircle,
isClick:false
}
this.currClick=this.currClick.bind(this);
}
currClick(e){
if(!this.state.isClick){
this.setState({
isClick:true,
isCircle:this.props.isCircle
});
this.props.cickKuai(this.state.number);
this.props.changeCircle();
}
}
render(){
return(
<div onClick={this.currClick} style={{cursor:'pointer',width:'100px',height:'100px',lineHeight:'100px',textAlign:'center',float:'left',border:'1px solid red',fontWeight:'blod'}}>
{this.state.isClick?this.state.isCircle?'O':'X':null}
</div>
);
}
}
export default LittleKuai;
import React,{Component} from 'react'
import LittleKuai from './LittleKuai'
class GameBig extends Component{
constructor(props){
super(props);
this.state={
isCircle: false,
currKuai: 0
}
this.currCickKuai = this.currCickKuai.bind(this);
this.currChangeCircle = this.currChangeCircle.bind(this);
}
currCickKuai(number){
this.setState({
currKuai:number
});
}
currChangeCircle(){
this.setState({
isCircle:!this.state.isCircle
});
}
render(){
const kuai1 = [1,2,3].map((item) => {
return <LittleKuai key={item} cickKuai={this.currCickKuai} changeCircle={this.currChangeCircle} number={item} isCircle={this.state.isCircle}></LittleKuai>;
})
const kuai2 = [4,5,6].map((item) => {
return <LittleKuai key={item} cickKuai={this.currCickKuai} changeCircle={this.currChangeCircle} number={item} isCircle={this.state.isCircle}></LittleKuai>;
})
const kuai3 = [7,8,9].map((item) => {
return <LittleKuai key={item} cickKuai={this.currCickKuai} changeCircle={this.currChangeCircle} number={item} isCircle={this.state.isCircle}></LittleKuai>;
})
return(
<div style={{marginLeft:'40%',marginTop:'7%'}}>
<div>
{kuai1}
</div>
<div style={{clear:'both'}}></div>
<div>
{kuai2}
</div>
<div style={{clear:'both'}}></div>
<div>
{kuai3}
</div>
</div>
);
}
}
export default GameBig;
运行结果,截个图。功能没做完善,就是自己写了看看,学了一周React了,有什么收获没有: