React学习:事件绑定、组件定义、for、map循环-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
React学习:事件绑定、组件定义、for、map循环-学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- React學習:事件綁定、組件定義、for、map循環-學習筆記
- 事件綁定
- 組件定義 （參數傳遞）
- 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 datas: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 需要顯示傳遞propsfunction 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>總結
以上是生活随笔為你收集整理的React学习:事件绑定、组件定义、for、map循环-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React学习:入门实例-学习笔记
- 下一篇： React学习：双向数据绑定、约束性和非