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"));