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>
		)