react事件处理条件渲染列表循环

1条件判断与渲染

class ParentCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            isLogin:true
        }
    }
    render(){
        if(this.state.isLogin){
            return (<Aa></Aa>)
        }else{
            return (<Bb></Bb>)
        }
    }
}

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 只有放在就近的数组上下文中才有意义。

class Welcome extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            list:[
                {
                    title:"React",
                    content:"内容"
                },
                {
                    title:"React2",
                    content:"内容2",
                },
                {
                    title:"React3",
                    content:"内容3",
                }
            ]
        }
    }

    render(){
        
        return (
            <div>
                <h1>
                    今天课程内容
                </h1>

                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <li key={index} onClick={(event)=>{this.clickFn(index,item.title,event)}}>//点击传递参数

                                    <h3>{item.title}</h3>
                                    <p>{item.content}</p>
                                </li>
                            )
                        })
                    }
                    <li>
                        <h3>这是标题</h3>
                        <p>内容</p>
                    </li>
                </ul>

            </div>
        )
    }

　　　　clickFn(index,title,event){}

}

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;

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