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】事件处理