react相关资料

2019独角兽企业重金招聘Python工程师标准>>>

react 官网：

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

中文官网

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

react模块间的传递

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

 

阮一峰react用法详解

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

 

组件间的通信

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

 

 

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(     // 将需要循环的结构和数据 添加到临时数组中

                    <li data-gid={item.id} data-logo={item.logo} onClick={self.clickList} data-name={item.game_name} >

                        <div className="gamelist-icon">

                            <img src={item.logo} />

                        </div>

                        <div className="gamelist-count">

                            <div className="gamelist-contitle">{item.game_name}</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 (

                    <div className={showCls}>

                        <div className="gamelist-pop">

                            <b className="gamelist-close" onClick={self.clickclose}></b>

                            <h1>游戏列表</h1>

                            <div className="gamelist-listbox">

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

                            </div>

                            <div className="gamelist-btns">

                                <div className="gamelist-btnbox">

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

                                    <div className="gamelist-btnright btn-on"  data-id=“next" onClick={self.getNext.bind(this)}></div>

                                </div>

                            </div>

                        </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 className=“wrap>

     <Select select={this.select} />

  

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

<Siblings ref='[name]’  />

</div>

 

//在父模块中写函数

select : function(value){

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

     this.refs.vale.setState({

          value: value

     })

}

 

 

 

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

 

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

 

<List item={data} />

 

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

getDefaultProps : function () {

            return {

                item : {},

                replay : function () {},

                share : function () {}

            };

   }

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

render : function () {

       var self = this;

        var item = self.props.item;

      

}

 

 

子组件改变父组件数据

 

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

this.props.postData(data);

 

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

<List getData = {self.onData} />

 

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

onData: function(){

this.State({

     Data :data

})

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3047945/blog/806277