react相关资料

时间 2019-11-17

标签 react 相关资料栏目 React 繁體版

原文原文链接

react 官网：css

http://facebook.github.io/react/docs/component-specs.html#lifecycle-methodshtml

中文官网react

http://www.css88.com/react/index.htmlgit

react模块间的传递github

http://www.alloyteam.com/2016/01/some-methods-of-reactjs-communication-between-components/数组

阮一峰react用法详解app

http://www.ruanyifeng.com/blog/2015/03/react.htmlsocket

组件间的通讯函数

http://reactjs.cn/react/tips/communicate-between-components.htmlpost

react 视频学习网

http://www.hubwiz.com/course/552762019964049d1872fc88/

//建立一个新的模块

var SelectGamelist = React.createClass({}）

// 模块中全局属性

//当有数据变更，须要从新渲染页面时用state

getInitialState : function () {

return {

dataList : [],

pageIndex: this.props.pageIndex,

maxPageNo : 0

};

//没有数据变更，不须要从新渲染页面时用pops

getDefaultProps : function () {

return{

title : "提示" ,

content : "啊，主银，你的网挂掉了！啊，主银，你的网挂掉了！"

}

//渲染页面

render : function () {

var self = this;

var dataList = self.state.dataList; //整体数据

var result = [];// 临时数组

dataList.forEach(function( item ,index){ //遍历数组

result.push( // 将须要循环的结构和数据添加到临时数组中

</div>

<div className="gamelist-peoples">{item.max_player}人正在对战</div>

<div className="gamelist-prompt">{item.teach_text}</div>

</div>

</li>

)

});

return (

<ul className="gamelist-list">{result}</ul> // 将临时数组渲染到结构中

)

//获取数据

getGameList: function () {

var self = this;

socketFlow.getGameList({

pageIndex: this.state.pageIndex, //传出的值

pageNo: 5

} , function (res) {

self.setState({

dataList : res.gameList, //将获取到的数据设置成全局数据

maxPageNo : res.page_num

});

//点击时触发的事件

clickList : function (e) {

var self = this ;

var el = $(e.currentTarget);

var gid = el.attr('data-gid');

var name = el.attr('data-name');

var logo = el.attr('data-logo');

this.props.onSelectGame(gid , name ,logo); //设置成全局的事件方便调用

}

var SelectGame = React.createClass({

getInitialState: function(){

return {

showPopup: 0,

pageIndex: 0,

notEnd: true,

notFirst : true,

gid: 0 ,

name : ""

};

render : function () {

var self = this;

var lastCls = 'gamelist-btnleft', nextCls = 'gamelist-btnright’; //设置class参数

var showCls = 'gamelist-wrap'

if (this.state.showPopup == 1 ) {

showCls += ' hidden'

};

return (

<SelectGamelist ref="gamelist" pageIndex={this.state.pageIndex} onSelectGame={this.props.onSelectGame} /> //添加事件属性

</div>

<div className="gamelist-btnleft" data-id="last" onClick={self.getLast.bind(this)}></div> // 事件有变动

</div>

);

getNext : function (e) {

var self = this;

var pageIndex = this.state.pageIndex + 1;

var maxPageNo = this.refs.gamelist.state.maxPageNo - 1;

var notEnd = this.state.notEnd ;

var el = $(e.currentTarget);

this.setState({

notFirst : true

});

if (pageIndex>=maxPageNo) {

$('[data-id=next]').removeClass("btn-on");

this.setState({

notEnd: false

});

};

if (notEnd) {

$('[data-id=last]').addClass("btn-on");

this.setState({

pageIndex: pageIndex

});

};

getLast : function (e) {

var self = this;

var pageIndex = this.state.pageIndex - 1;

var notFirst = this.state.notFirst ;

var el = $(e.currentTarget);

if (!el.hasClass('btn-on')) {

return;

}

this.setState({

notEnd : true

});

if (pageIndex<=0) {

$('[data-id=last]').removeClass("btn-on");

this.setState({

notFirst: false

});

};

if (notFirst) {

$('[data-id=next]').addClass("btn-on");

this.setState({

pageIndex: pageIndex

});

};

}

});

// 分享组件调用

_url = self._url = _url.replace(location.hash , '#result’); //不是在本方法里的参数，设置成这个模块公用的变量

share : function () { // 分享模块

var self = this ;

var pl = env.sourse;

if (pl == 2001) { //碰碰内部时调用组件中的分享弹窗

client.share.invoke();

} else {

self.showPOP() // 非碰碰时调用分享组件

};

showPOP : function (){ //渲染分享组件

var temp = this._temp = $('<div id="temWarp"></div>’); //建立一个新的Dom 结构

$(document.body).append(temp); //将新节点插入body

React.render(<SharePop url={this._url} popClose={this.popClose} /> , temp[0]) //渲染模块组件

popClose : function () { //组件中暴漏出的函数

var self = this ;

React.unmountComponentAtNode(self._temp[0]); //销毁节点中的模块

self._temp.remove(); //移除节点

//模块中的通讯

从父模块中调取子模块数据

//在子模块中定义全局属性（函数）

this.props.onSelect(value);

// 在父模块中加入模块

//给子模块取名（在父模块中调用子模块是使用）

</div>

//在父模块中写函数

select : function(value){

//将从子模块中取到的值取出并设置为父模块的全局属性（在父模块中设置子模块用ref）

this.refs.vale.setState({

value: value

})

}

子模块从父模块中取数据（或事件）

//父模块中引用子模块，同时把子模块须要的数据穿以参数的形式传递出去

//子模块中设置prop或state，作为模块中自用的全局属性

getDefaultProps : function () {

return {

item : {},

replay : function () {},

share : function () {}

};

}

//在子模块的分类中调用全局属性

render : function () {

var self = this;

var item = self.props.item;

}

子组件改变父组件数据

//子模块定义一个子模块的全局函数将数据以参数的形式传入函数中

this.props.postData(data);

//父模块调用时写入函数

//父函数写入函数并设置参数为父函数全局属性

onData: function(){

this.State({

Data :data

})