react基础学习二 --- 数据循环展示、组件定义、事件绑定

一、数据循环展示
方式一、使用map循环数组.

 var arr = ['a','b','c','d'];

            ReactDOM.render(
                <div>
                    {
                        arr.map((item,index)=>{
                            return <div key={index}>{item}</div>
                        })
                    }
                </div>,document.getElementById('my'));

方式二、for循环

// for循环
            var arr = ['a','b','c','d'];
            var  str =  [];

            for (let i = 0; i < arr.length; i++) {
               str.push(<div key={i}>{arr[i]}</div>)    
            }
            ReactDOM.render(
                <div>
                   {str}
                </div>,document.getElementById('my'));

二、组件
定义组件的方式：Class和Function
方式1 使用function的方式定义 传递参数要显示传递props

function Com(){
                return <h1>这是一个组件</h1>
            }
 ReactDOM.render(
                <div>
                   <Com></Com>
                </div>,document.getElementById('my')
            );

方式二：使用class的方式定义 传递参数使用this.props接收

//    组件
            var obj = {
                name :'abc',
                age:18
            }
          
            class Welcome extends React.Component{
                render(){
                    return <h1>welcome react{this.props.age}</h1>
                }
            }
            ReactDOM.render(
                <div>
                    <Welcome age={obj.age}></Welcome>  
                </div>,document.getElementById('my'))

一个demo：

 var obj = {
                title:"静夜思",
                content:["床前明月光","疑似地上霜","举头望明月","低头思故乡"],
                author:{
                    name:"李白",
                    url:"https://pic.baike.soso.com/ugc/baikepic2/10570/20180126100007-1981153861_jpg_600_697_41027.jpg/0"
                }
            };
            function Title(props){
                return <h1>{props.title}</h1>
            };
            class Content extends React.Component{
                render(){
                    return this.props.content.map((item,index)=>{
                        return <div key={index}>{item}</div>
                    })
                }
            };
            class Img extends React.Component{
                render(){
                    return <img src = {this.props.src}/>
                }
            }
            function App(props) {
                return <div>
                    <Title title={props.title}/>
                    <Content content = {props.content}/>
                    <Img src = {props.author.url}/>
                </div>
            };
           
            ReactDOM.render(<App title={obj.title} content={obj.content} author={obj.author}/>,document.getElementById('my'))
        }

效果：

三、事件绑定
三种方式见注释。方式一和方式二需要绑定this。

  class TabList extends React.Component{
              constructor(){
                  super();
                  this.state = {
                      flag:"方式一"
                  }
                  this.handleClick = this.btnOneChange.bind(this);//方式一、构造器中声明绑定
              }
              btnOneChange(){
                  this.setState({
                      flag : "方式一"
                  })
              };
              btnClick(){//方式三
                  this.setState({
                      flag:"方式二"
                  })
              };
              btnTwoChange(){//方式三
                  this.setState({
                      flag:"方式三"
                  })
              }
              render(){
                  var flag = this.state.flag;
                  return (
                      <div>
                        <ul>
                            <li className={flag=="方式一"?'active':''} onClick={this.handleClick}>按钮1</li>
                            <li className={flag=="方式二"?'active':''} onClick={this.btnClick.bind(this)}>按钮2</li>
                            <li className={flag=="方式三"?'active':''} onClick={()=>this.btnTwoChange()}>按钮3</li>
                        </ul>
                        <div>
                            {flag}
                        </div>
                      </div>
                  )
              }
          }
   

          ReactDOM.render(<TabList/>,document.getElementById('my'))

一个Demo

  class TabList extends React.Component{
               constructor(){
                   super();
                   this.state={
                       n:0,
                       tabs:[
                           {title:"新闻",content:"新闻111111"},
                           {title:"动态",content:"动态222222"},
                           {title:"附近",content:"附近333333"},
                           {title:"空间",content:"空间444444"}
                       ]
                   }
               };
               tabChange(index){
                   this.setState({
                       n:index
                   })
               };
               render(){
                   let _this = this;
                   let n = _this.state.n;
                   var tabList = _this.state.tabs.map(function(item,index){
                       return <li key={index} className={index==n?"active":""} 
                        onClick={()=>_this.tabChange(index)}>{item.title}</li>
                   })
                   return (
                       <div>
                        <ul>
                            {tabList}
                        </ul>
                        <div>
                            {
                                this.state.tabs.map(function (item,index) {
                                    return (index==n?<p key={index}>{item.content}</p>:"")
                                })
                            }
                        </div>
                       </div>
                     
                   )
               } 
          }
          ReactDOM.render(<TabList/>,document.getElementById('my'))