React 第二节 组件定义及事件

今日分享：
事件的处理方式
组件的定义及运用

react中数组循环最好用map,foreach没有返回值；

数组写法

<div id='my'></div> <script type="text/babel"> 	var div = [<h1>123456</h1>, 			   <h1>123456</h1>, 			   <h1>123456</h1>, 			   <h1>123456</h1>,		 			  ] 	ReactDOM.render( 		<div> 			{div} 		</div>, 		document.getElementById("my") 	) </script> 

map写法

<div id='my'></div> <script type="text/babel"> 	/*map第一种写法*/ 	var arr = [1,2,3,4,5] 	ReactDOM.render( 		<div> 			{ 	          arr.map((item,index)=>{ 	            return <div key={index}>{item}</div> 	          })         	} 		</div>, 		document.getElementById("my") 	) 	/*map第二种写法*/ 	var arr = [1,2,3,4,5] 	var a = arr.map((item,index)=>{ 	            return <div key={index}>{item}</div> 	        }) 	ReactDOM.render( 		<div> 			{a} 		</div>, 		document.getElementById("my") 	) </script> 

for写法

<div id='my'></div> <script type="text/babel"> 	var arr = [1,2,3,4,5]     var a = []     for(var i=0; i<arr.length; i++){       a.push(<div key={i}>{arr[i]}</div>)     } 	ReactDOM.render( 		<div> 			{a} 		</div>, 		document.getElementById("my") 	) </script> 

Tab实例

  <div id="my"></div>    <script type="text/babel">   	//加载不同组件  	    class ContentA extends React.Component {       render(){         return(           <div>             <h1>我是内容A</h1>           </div>         )       }     }     class ContentB extends React.Component {       render(){         return(           <div>             <h1>我是内容B</h1>           </div>         )       }     }      function Content(props) {       switch (props.type) {         case 0:           return <ContentA />           break;         case 1:           return <ContentB />           break;         case 2:           return <h1>我是内容C</h1>           break;         case 3:           return <h1>我是内容D</h1>           break;         default:           return <p>默认{props.type}</p>           break;       }     }     //end          class Tab extends React.Component {       constructor(){         super();         this.state ={           flag:0,           lists:[{title:'标题A',content:'内容A'},                 {title:'标题B',content:'内容B'},                 {title:'标题C',content:'内容C'},                 {title:'标题D',content:'内容D'}]         }       }       change(type) {         this.setState({           flag:type         })       }       render(){         var flag = this.state.flag;         var list = this.state.lists.map((item,index)=>{           return <li className={index==flag ?'selected':''} onClick={()=>this.change(index)} key={index}>{item.title}</li>         })         var content = this.state.lists.map((item,index)=>{           return (index==flag ? <p key={index}>{item.content}</p>:'')         })         return (           <div>            <ul>{list}</ul>            <div> 	           {content}  	           //加载不同组件 	           <Content type={flag}></Content>            </div>           </div>         )       }     };     ReactDOM.render(       <Tab></Tab>,       document.getElementById("my")     );      </script> 

组件 两种写法

var data = { 	name:'tina', 	age:18, 	address:'苏州' } /*1、es6 的 class类*/ class Hi extends React.Component {       render(){         return(           <div>             <h1>我是内容B {this.props.data.age}</h1>           </div>         )       } } /*2、使用函数定义一个组件*/ function Hello(){ 	return <div>Hello {props.name} {props.age} {props.address}!</div> } ReactDOM.render(   <div> 	  <Hi data={data}></Hi> 	  <Hello {...data}></Hello>   </div>,   document.getElementById("my") ); 

事件绑定

class App extends React.Component { 	constructor(){ 		super(); 		this.state = { 			flag:true 		} 		this.handleClick=this.change1.bind(this); //第一种方式在构造器中声明绑定 	} 	change1(){ 		this.setState({ 			flag:true 		}) 	} 	change2(){ 		this.setState({ 			flag:false 		}) 	} 	render(){ 		return( 			//第一种，官方推荐 在构造器中声明绑定 			<button onClick={this.handleClick}></button> 			// 第二种, 第一种的简单版 			<button onClick={this.change2.bind(this)}></button> 			// 第三种， ES6箭头函数 			<button onClick={()=>this.change2}></button> 		)