React学习:事件绑定、组件定义、for、map循环-学习笔记

朴灿烈づ我的快乐病毒、 2022-09-01 14:48 165阅读 0赞

文章目录

    • React学习:事件绑定、组件定义、for、map循环-学习笔记
      • 事件绑定
      • 组件定义 (参数传递)
      • for、map循环

React学习:事件绑定、组件定义、for、map循环-学习笔记

事件绑定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>react-tab多选项切换</title>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <link href="css/index.css" rel="stylesheet">
  9. <script src="js/react.development.js"></script>
  10. <script src="js/react-dom.development.js"></script>
  11. <script type="text/javascript" src="js/babel.min.js"></script>
  12. </head>
  13. <body>
  14. <div id="app"></div>
  15. <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>
  16. </body>
  17. </html>
  18. <!-- var x = 100; function f1(){ return this.x } var obj ={ x : 999 }; var a = f1.bind(obj); a(); -->

组件定义 (参数传递)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>react-tab多选项切换</title>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <link href="css/index.css" rel="stylesheet">
  9. <script src="js/react.development.js"></script>
  10. <script src="js/react-dom.development.js"></script>
  11. <script type="text/javascript" src="js/babel.min.js"></script>
  12. </head>
  13. <body>
  14. <div id="app"></div>
  15. <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>
  16. </body>
  17. </html>

for、map循环

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>react-tab多选项切换</title>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <link href="css/index.css" rel="stylesheet">
  9. <script src="js/react.development.js"></script>
  10. <script src="js/react-dom.development.js"></script>
  11. <script type="text/javascript" src="js/babel.min.js"></script>
  12. </head>
  13. <body>
  14. <div id="app"></div>
  15. <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>
  16. </body>
  17. </html>

发表评论

表情:
评论列表 (有 0 条评论,165人围观)

还没有评论,来说两句吧...

相关阅读