react事件處理條件渲染列表循環

本文轉載自查看原文 2020-04-12 12:13 601 react

1條件判斷與渲染

 1 class ParentCom extends React.Component{
 2     constructor(props){
 3         super(props)
 4         this.state = {
 5             isLogin:true
 6         }
 7     }
 8     render(){
 9         if(this.state.isLogin){
10             return (<Aa></Aa>)
11         }else{
12             return (<Bb></Bb>)
13         }
14     }
15 }

class ParentCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            isLogin:false
        }
    }
    render(){
        let element = null;
        if(this.state.isLogin){
            element = <Aa></Aa>;
        }else{
            element = (<Bb></Bb>);
        }

        return (
            <div>
                <h1>element</h1>
                {this.state.isLogin?<Aa></Aa>:<Bb></Bb>}
            </div>
        )
    }
}

2列表渲染元素的 key 只有放在就近的數組上下文中才有意義。

 1 class Welcome extends React.Component{
 2     constructor(props){
 3         super(props)
 4         this.state = {
 5             list:[
 6                 {
 7                     title:"React",
 8                     content:"內容"
 9                 },
10                 {
11                     title:"React2",
12                     content:"內容2",
13                 },
14                 {
15                     title:"React3",
16                     content:"內容3",
17                 }
18             ]
19         }
20     }
21 
22     render(){
23         
24         return (
25             <div>
26                 <h1>
27                     今天課程內容
28                 </h1>
29 
30                 <ul>
31                     {
32                         this.state.list.map((item,index)=>{
33                             return (
34                                 <li key={index} onClick={(event)=>{this.clickFn(index,item.title,event)}}>//點擊傳遞參數

35                                     <h3>{item.title}</h3>
36                                     <p>{item.content}</p>
37                                 </li>
38  ) 39  }) 40  } 41                     <li>
42                         <h3>這是標題</h3>
43                         <p>內容</p>
44                     </li>
45                 </ul>
46 
47             </div>
48  ) 49  }

　　　　clickFn(index,title,event){}

50 }

import React from 'react'

class MyNav extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            isLogin:false,
            List:[]
        }
    }
    render() { 
        const {List} =this.state;
        let showView=this.state.isLogin ? 
        <div>用戶是某某某</div>:
        <div>請登錄</div>
        return ( 
            <div>
                <p>{showView}</p>
                <button onClick={this.loginHandler}>登錄</button>
                {
                    List.length>0 ?
                    <ul>
                        {List.map((item,index)=>{
                            return(
                                <li key={index} >{item}</li>
                            )
                        })}
                    </ul>:<p>數據未加載</p>
                }
            </div>
        );
    }
    loginHandler=()=>{
        this.setState({
            isLogin:true,
            List:['張三','李四','王五']
        })
    }
    
}
 
export default MyNav;

View Code

3插槽

render(){
    return (
        <ParentCom>
            <h2 data-position="header">子組件1</h2>
            <h2>子組件2</h2>
            <h2>子組件3</h2>
        </ParentCom>
    )
}

class ParentCom extends React.Component{
    
    render(){
        let headerCom;
       // {this.props.children}//這里可以渲染傳入的東西，你也可以自己判斷不同參數顯示不同
        this.props.children.forEach((item,index)=>{
           if(item.props['data-position']==='header'){
             headerCom = item
           }
        })
        return (
            <div>
                <div className="header">
                    {headerCom}
                </div>
            </div>
        )
    }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端MVC Vue2學習總結（四）——條件渲染、列表渲染、事件處理器 React學習筆記(四) 條件渲染與列表渲染 react中回車enter事件處理 react的事件處理為什么要bind this 改變this的指向？為什么React事件處理函數必須使用Function.bind()綁定this？ Canvas事件處理 taro 事件處理 jQuery事件處理（一） JavaScript事件處理【Swing】事件處理