ReactJS方面的知识

一：用js的方式书写css，注意css格式的书写方式：

var styleSheets={
　　header:{
　　　　width:'100%',
　　　　overflow:'hidden',
　　　　height:'0.86rem',
　　　　backgroundColor:'rgb(228,54,107)',
　　　　display:'flex',
　　　　justifyContent:'center',
　　　　alignItems:'center'
　　},
　　headerdiv:{
　　　　width:'2.61rem',
　　　　height:'0.54rem'
　　},
　　img:{
　　　　width:'100%',
　　　　height:'100%',
　　　　display:'block'
　　},
　　search:{
　　　　width:'100%',
　　　　overflow:'hidden',
　　　　height:'0.9rem',
　　　　backgroundColor:'rgb(82,82,90)',
　　　　display:'flex',
　　　　justifyContent:'center',
　　　　alignItems:'center'
　　},
　　box:{
　　　　display:'flex',
　　　　height:'0.56rem',
　　　　width:'5.9rem',
　　　　backgroundColor:'#FFFFFF',
　　　　borderRadius:'0.28rem',
　　　　justifyContent:'space-around',
　　　　alignItems:'center'
　　},
　　boxImg:{width:'0.34rem',height:'0.34rem'},
　　boxInput:{border:'0rem',outline:'none'},
　　banner:{
　　　　width:'100%',
　　　　height:'2.5rem',
　　　　overflow:'hidden'
　　},
　　bannerimg:{
　　　　width:'100%',
　　　　height:'100%',
　　　　display:'block'
　　},
　　cxt:{
　　　　width:'100%',
　　　　overflow:'hidden'
　　},
　　div:{
　　　　width:'100%',
　　　　height:'2.2rem',
　　　　borderBottom:'1px solid #000000',
　　　　display:'flex',
　　　　justifyContent:'center',
　　　　alignItems:'center'
　　},
　　listimg:{
　　　　width:'1.76rem',
　　　　height:'1.76rem'
　　},
　　span:{
　　　　fontSize:'0.28rem',
　　　　fontWeight:'600',
　　　　fontFamily:'微软雅黑'
　　},
　　footer:{
　　　　position:"fixed",
　　　　width:"100%",
　　　　height:"1rem",
　　　　backgroundColor:"rgb(82,82,90)",
　　　　display:"flex",
　　　　left:"0%",
　　　　bottom:"0rem",
　　　　textAlign:"center"
　　},
　　footerdiv:{
　　　　width:"20%",
　　　　height:"100%",
　　　　fontSize:"0.28rem",
　　　　lineHeight:"1rem",
　　　　fontFamily:"微软雅黑",
　　　　color:"#ffffff"
　　}
}

/**页面布局组件 开始**/
var ComponentLayout=React.createClass({
　　render:function(){
　　　　return(
　　　　　　<div>
　　　　　　　　<div id="header"></div>
　　　　　　　　<div id="search"></div>
　　　　　　　　<div id="banner"></div>
　　　　　　　　<div id="list"></div>
　　　　　　　　<div id="footer"></div>
　　　　　　</div>
　　　　);
　　}
});

/**页面头部组件 开始**/
var ComponentHeader=React.createClass({
　　render:function(){
　　　　var img="img/goshow-header-img.png";
　　　　return(
　　　　　　<div style={styleSheets.header}>
　　　　　　　　<div style={styleSheets.headerdiv}>
　　　　　　　　　　<img src={img} style={styleSheets.img}/>
　　　　　　　　</div>
　　　　　　</div>
　　　　);
　　}
});

/**页面搜索框组件 开始**/

//1.在input输入,在touch 搜索图片的时候,发送ajax请求,获得对应数据
//2.数据获得之后 如何传入到ListView组件里面,
//3.ListView怎么去解析这些数var ComponentSearch=React.createClass({　　//定义空字符串去存储文本框变化的值

　　getDefaultProps:function(){
　　　　return{
　　　　　　service:
　　　　　　'http://datainfo.duapp.com/shopdata/selectGoodes.php?selectText='
　　　　}
　　},
　　getInitialState:function(){
　　　　return{
　　　　　　text:''
　　　　}
　　},
　　handleChange:function(event){
　　　　//每次都获取文本框的值
　　　　var _text=event.target.value;
　　　　//将值存在state里面
　　　　this.setState({text:_text});
　　　　//测试
　　　　console.log(this.state.text);
　　},
　　handleTouch:function(){
　　　　//1.点击图片按钮的时候,获得文本框里面值
　　　　var _text=this.state.text;
　　　　console.log(_text);
　　　　//2.发送ajax请求 获得数据 jsonp,
　　　　//这个请求是get请求,jsonp不可能支持post请求
　　　　Common.http(this.props.service+_text,
　　　　function(data){
　　　　　　var _json=Common.trans(data);
　　　　　　console.log(_json);
　　　　//3.如何将这个数据传递到另外一个不相关的组件里面
　　　　//经过从新渲染ListView 在渲染的时候，传入新属性
　　　　//达到将数据传入另外一个不相关的组件内部
　　　　ReactDOM.render(<ComponentList name={_json}/>,
　　　　　　document.getElementById("list"));
　　　　});
　　},
　　render:function(){
　　　　var img="img/goshow-search-img.png";
　　　　return(
　　　　　　<div style={styleSheets.search}>
　　　　　　　　<div style={styleSheets.box}>
　　　　　　　　　　<img onTouchEnd={this.handleTouch} style={styleSheets.boxImg} src={img}/>
　　　　　　　　　　<input onChange={this.handleChange} style={styleSheets.boxInput} type="text"/>
　　　　　　　　</div>
　　　　　　</div>
　　　　);
　　}
});

/**页面banner图组件 开始**/

　　var ComponentBanner=React.createClass({
　　//设置默认的数据源
　　　　getDefaultProps:function(){
　　　　return {sourceUrl:
　　　　　　'http://datainfo.duapp.com/shopdata/getBanner.php'}
　　　　},
　　//设置状态 存储变化的数据
　　getInitialState:function(){
　　　　return {result:[]}
　　},
　　//willmount里面去发送ajax请求
　　componentWillMount:function(){
　　　　var _this=this;
　　　　Common.http(this.props.sourceUrl,function(data){
　　　　　　console.log(typeof data);
　　　　　　//jsonp ---- callback(json);
　　　　　　var point=data.indexOf("(");
　　　　　　var length=data.length;
　　　　　　data=data.substring(point+1,length-1);
　　　　　　data=JSON.parse(data);
　　　　　　console.log(data);
　　　　　　//把获得的数据放进result里面
　　　　　　_this.setState({result:data});
　　　　});
　　},
　　render:function(){
　　　　//jsx支持叠加,jsx自己就是数组
　　　　var s=[];//存储jsx叠加后的总的jsx结果 数组
　　　　for(var i=0;i<this.state.result.length;i++){
　　　　　　var img=JSON.parse(this.state.result[i].goodsBenUrl)[0];
　　　　　　s.push(<div style={styleSheets.banner} className="swiper-slide">
　　　　　　<img style={styleSheets.bannerimg}
　　　　　　src={img}/>
　　　　</div>);
　　}
return(
<div style={styleSheets.banner}>
<div className="swiper-container">
<div className="swiper-wrapper">
{s}
</div>
</div>
</div>
);
},
componentDidUpdate:function(){
var swiper=new Swiper('.swiper-container',{
autoplay:1000,loop:true
});
}
});
/**页面banner图组件 结束**/

/**页面list组件 开始**/
//1.当咱们ComponentList组件初始化的时候,数据存在那个里面?
//
//2.当咱们点击搜索之后,咱们是怎么样将数据传入到ComponentList里面来
//
//3.数据传入到当前组件里面,组件里面如何解析
//
//核心点 在于判断当前组件props是否为空,为空的时候,使用result往
//ComponentList的子组件中去传值,让子组件去解析
//
//不为空,就把props里面获得的最新值,赋给state里面的result,在继续往
//ComponentList子组件里面传值,并解析

var ComponentList=React.createClass({
getDefaultProps:function(){
return{
webservice:'http://datainfo.duapp.com/shopdata/getGoods.php'
}
},
//设置状态存储数据
getInitialState:function(){
return{
result:[]
}
},

//发送数据 获得数据-------存到state里面
componentWillMount:function(){
var _this = this;
Common.http(this.props.webservice,function(data){
//获得的数据格式 callback(data)
_this.setState({result:Common.trans(data)});
});
},
render:function(){
console.log("打印输出state是否存入了数据");
console.log(this.state.result);
var _result=this.state.result;
if(this.props.name==""||typeof(this.props.name)=="undefined"){
console.log("未搜索");
}else{
console.log("已经传入新属性");
_result=this.props.name;
}
//4在render
//jsx中嵌套变量
var list = [];
for(var i = 0;i<_result.length;i++){
list.push(<ListItem {..._result[i]}/>);
}
return(
<div style={styleSheets.cxt}>
{list}
</div>
);
}
});
var ListItem=React.createClass({
render:function(){
var _img = this.props.goodsListImg;
var _name = this.props.goodsName;

//长度处理
_name = _name.substring(0,6) + '...'
return(
<div style={styleSheets.div}>
<img style={styleSheets.listimg}
src={this.props.goodsListImg} />
<span style={styleSheets.span}>
{_name}</span>
</div>
);
}
});
/**页面list组件 结束**/

/*
新建一个新组件
*
* */
var ComponentClassify = React.createClass({
render:function(){
var _css = {
fontSize:"0.24rem",
width:"100%",
textAlign:"center",
height:"1rem",
color:"red"
};
return(
<div style={_css}>
this is comp classify
</div>
);
}
});

 

//组件卸载的方法 ReactDOM.unmountComponentAtNode(); 表示的是在某个节点中将组件删掉
//被调用以后，返回true表示卸载成功，false表示卸载失败
//虽然这个方法能够卸载掉组件，可是前提是这个组件必须被ReactDOM。render这个方法渲染后才能够被卸载掉

/**页面footer组件 结束**/
//1.红线，点击时红线能够滑动
//2.点击分类的时候，先卸载主页的组件
//三、把新的分类的组件装到layout里面
var ComponentFooter = React.createClass({
getInitialState:function(){
return{
_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"0%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
},
handleTouch:function(event){
var _title = event.target.getAttribute("title");
var _left = this.state._css.left;

var _search = document.getElementById("search");
var _banner = document.getElementById("banner");
var _list = document.getElementById("list");
switch(_title){
case"index":
this.setState({_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"0%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
);
ReactDOM.unmountComponentAtNode(_search);
ReactDOM.unmountComponentAtNode(_banner);
ReactDOM.unmountComponentAtNode(_list);

ReactDOM.render(<ComponentSearch/>,_search);
ReactDOM.render(<ComponentBanner/>,banner);
ReactDOM.render(<ComponentList/>,list);
break;

case"classify":
this.setState({_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"20%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
);

//卸载以前的组件 search,banner,list 载入新组件 classify
Common.unmountComponentByName(['search','banner','list']);

//载入新组件 classify
ReactDOM.render(<ComponentClassify/>,_search);
break;
case"shopcar":
this.setState({_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"40%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
);

break;
case"myshow":
this.setState({_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"60%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
);
break;
case"more":
this.setState({_css:{
width:"20%",
height:"0.04rem",
position:"fixed",
left:"80%",
bottom:"0.98rem",
backgroundColor:"rgb(228,54,107)",
transition:"left 0.4s linear",zIndex:"999"
}
}
);
break;

}
},
render:function(){

return(
<div>
<div style={styleSheets.footer}>
<div onTouchEnd={this.handleTouch} title="index" style={styleSheets.footerdiv}>首页</div>
<div onTouchEnd={this.handleTouch} title="classify" style={styleSheets.footerdiv}>分类</div>
<div onTouchEnd={this.handleTouch} title="shopcar" style={styleSheets.footerdiv}>购物车</div>
<div onTouchEnd={this.handleTouch} title="myshow" style={styleSheets.footerdiv}>个人秀</div>
<div onTouchEnd={this.handleTouch} title="more" style={styleSheets.footerdiv}>更多</div>
</div>
<div style={this.state._css}></div>
</div>
);
}
});
/**页面footer组件 结束**/

ReactDOM.render(<ComponentLayout/>,document.body);ReactDOM.render(<ComponentHeader/>,document.getElementById("header"));ReactDOM.render(<ComponentSearch/>,document.getElementById("search"));ReactDOM.render(<ComponentBanner/>,document.getElementById("banner"));ReactDOM.render(<ComponentList/>,document.getElementById("list"));ReactDOM.render(<ComponentFooter/>,document.getElementById("footer"));