react中的if判断

react中的if判断不同于 vue和angular。下面我们使用三元运算符来完成react中的if判断。

简化前的代码

state = {    
    isShowPersons:false   // 是否展示
}
toggleHandler = () =>{    
    const isShowState = this.state.isShowPersons;    
    this.setState({      
        isShowPersons:!isShowState    
    })
}
render(){    
    return(      
        <div className="App">          
            <h1>Hello world</h1>          
            {            
                this.state.isShowPersons?            
                <div>              
                    <Person                 
                        myclick={this.switchNameHandler.bind(this,'西柚西柚')}
                        name={this.state.persons[0].name}                 
                        count={this.state.persons[0].count}                 
                        changed={this.nameChangeHandler.bind(this)}/>              
                    <Person 
                        name={this.state.persons[1].name} 
                        count={this.state.persons[1].count} />                  
                    <Person 
                        name={this.state.persons[2].name} 
                        count={this.state.persons[2].count} />              
                    <Person>欢迎大家</Person>            
                 </div>:null          
            }          
            <button onClick={this.toggleHandler}>内容切换</button>      
        </div>    
    )  
}

简化后的代码：

简化后的代码主要是让return里面尽量减少逻辑判断。

state = {    
    isShowPersons:false   // 是否展示
}
toggleHandler = () =>{    
    const isShowState = this.state.isShowPersons;    
    this.setState({      
        isShowPersons:!isShowState    
    })
}render(){    
    let persons = null;    
    if(this.state.isShowPersons){      
        persons = (        
            <div>          
                <Person             
                    myclick={this.switchNameHandler.bind(this,'西柚西柚')}
                    name={this.state.persons[0].name}             
                    count={this.state.persons[0].count}             
                    changed={this.nameChangeHandler.bind(this)}/>          
                <Person 
                    name={this.state.persons[1].name} 
                    count={this.state.persons[1].count} />          
                <Person 
                    name={this.state.persons[2].name} 
                    count={this.state.persons[2].count} />          
                <Person>欢迎大家</Person>        
            </div>      
        )    
    }    
    return(      
        <div className="App">  
             {persons}        
            <button onClick={this.toggleHandler}>内容切换</button>      
        </div>    
    )  
}

欢迎访问博客：blog.csdn.net/Miss_liangr…