文章目录
- React学习:事件绑定、组件定义、for、map循环-学习笔记
-
React学习:事件绑定、组件定义、for、map循环-学习笔记
事件绑定
<!DOCTYPE html><html> <head> <title>react-tab多选项切换</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/index.css" rel="stylesheet"> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script type="text/javascript" src="js/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> window.onload = function(){ //事件绑定三种方式 //1、官方推荐 构造器中声明绑定 （见下构造函数中） //<a className={s==1?"menu-selected":''} onClick={this.change1}>女装/男装</a> //2、简单方式 //<a className={s==1?"menu-selected":''} onClick={this.change1.bind(this)}>女装/男装</a> //3、es6 箭头函数 //<a className={s==2?"menu-selected":''} onClick={()=>this.change()}>酒类/生鲜1</a> //组件 class ListInfo extends React.Component{ render(){ if(this.props.num==1){ return <h1>1111111</h1> }else if(this.props.num==2){ return <TabTwo /> }else { } } } class TabOne extends React.Component{ render(){ return ( <div> <ul> <li>11111</li> <li>11111</li> </ul> </div> ) } } class TabTwo extends React.Component{ render(){ return ( <div> <ul> <li>2222222</li> <li>2222222</li> </ul> </div> ) } } //组件 class Tab extends React.Component{ constructor(){ super(); this.state = { //等同于vue data s:1 }; //this.change1 = this.change1.bind(this); //构造器中声明绑定 } change(i){ this.setState({ s:i }) } change1(i){ this.setState({ s:i }) console.log(i); } render(){ var { s} = this.state; return ( <div id="layout"> <div id="menu"> <div className="menu-main"> <a className={ s==1?"menu-selected":''} onClick={ this.change1.bind(this,1)}>女装/男装</a> <a className={ s==2?"menu-selected":''} onClick={ ()=>this.change(2)}>酒类/生鲜1</a> <a className={ s==3?"menu-selected":''} onClick={ ()=>this.change(3)}>酒类/生鲜2</a> <a className={ s==4?"menu-selected":''} onClick={ ()=>this.change(4)}>酒类/生鲜3</a> </div> </div> <div id="main"> <div className="content"> <h2>一个专门从事购物的网站</h2> <div> <p>年轻人迷茫的的原因——在本该拼搏的年龄，想的太多，做的太少</p> <ListInfo num={ s} /> </div> </div> </div> </div> ) } }; ReactDOM.render( <Tab/>, document.getElementById('app')); } </script> </body></html><!-- var x = 100; function f1(){ return this.x } var obj ={ x : 999 }; var a = f1.bind(obj); a(); -->
组件定义 （参数传递）
<!DOCTYPE html><html> <head> <title>react-tab多选项切换</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/index.css" rel="stylesheet"> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script type="text/javascript" src="js/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> window.onload = function(){ var obj = { id:1, name:'abc', age:20, address:'wh', arr:[1,2,3], obj2:{ id:11} }; //函数定义 ES5 需要显示传递props function Hello(props){ return <h1>hello { props.address}</h1> } //组件 es6 class类 class Tab extends React.Component{ render(){ return ( <div> <ul> <li>11111 { this.props.name}</li> <li>11111 </li> <li>11111</li> </ul> </div> ) } } ReactDOM.render( <div> <Hello address={ obj.address}/> { /*<Tab obj ={obj} />*/} <Tab { ...obj} /> </div>, document.getElementById('app')); } </script> </body></html>
for、map循环
<!DOCTYPE html><html> <head> <title>react-tab多选项切换</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/index.css" rel="stylesheet"> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script type="text/javascript" src="js/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> window.onload = function(){ //第一种 map // var arr = [1,2,3,4,5,6]; // //组件 es6 class类 // class Tab extends React.Component{ // render(){ // return ( // <div> // <ul> // { // arr.map(function(item,index){ // return <li key={index}>{item}</li> // }) // } // </ul> // </div> // ) // } // } // ReactDOM.render( // <div> // <Tab /> // </div>, // document.getElementById('app')); //数组写法 // var arr2 = [ // <h1 key="1">1</h1>, // <h1 key="2">2</h1>, // <h1 key="3">3</h1> // ]; // ReactDOM.render( // <div> // {arr2} // </div>, // document.getElementById('app')); //for写法 var arr = [1,2,3,4,5,6]; var arr3 = []; for(var i=0;i<arr.length;i++){ arr3.push(<h1 key={ i}>{ arr[i]}</h1>) }; ReactDOM.render( <div> { arr3} </div>, document.getElementById('app')); } </script> </body></html>
港控/mmm°
亦凉
分手后的思念是犯贱
电玩女神
爱被打了一巴掌
╰+攻爆jí腚メ
ゞ 浴缸里的玫瑰
还没有评论，来说两句吧...