React——条件渲染

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/QxQstar/p/7531356.html

文章标签：

#javascript #ViewUI

本文介绍了React中基于状态的条件渲染技巧，包括使用变量存储不同状态下的元素以实现动态渲染，以及如何通过返回null来阻止组件渲染，同时展示了如何管理组件可见性的示例。

在React中，你可以创建各种不同的组件，然后根据应用的状态渲染出它们其中的一般部分。

一.用变量存储元素

可以将元素保存到一个变量中，通过为变量赋不同的值去渲染不同的元素

function LoginButton(props){
    return <button onClick={props.handleClick}>Login</button>
}
function LogoutButton(props){
    return <button onClick={props.handleClick}>Logout</button>
}
class LoginCtr extend React.Component{
    constructor(props){
        super(props);
        this.state={isLogin:false}
    }
    logOut(){
        this.setSate({
            isLogin:false
        })
    }
    logIn(){
        this.setState({
            isLogin:true
        });
    }
    render(){
        let button;
        if(this.state.isLogin){
            button = <LogoutButton handleClick={this.logOut.bind(this)}/>
        } else {
            button = <LogInButton handleClick={this.logIn.bind(this)}/>
        }
        return (<div>{button}</div>);
    }
};

二.阻止组件渲染

在少数情况下，你可能想让组件隐藏它自己而非被渲染到其他组件中，可以通过return null达到这种效果

function Waring(props){
    if(!props.waring){
       return null;
    }
    return <div>this is a waring</div>
}
class waringCtr extend React.Component{
    constructor(props){
        super(props);
        this.state = {hasWarn:false}
    }
    handle(){
        let hasWarn = this.state.hasWarn;
        hasWarn = !hasWarn;
        this.setState({
            hasWarn:hasWarn
        });
    }
    render(){
        return (
            <div>
                <button onClick={this.handle.bind(this)}>{this.state.hasWarn ? 'hideWarn':'showWarn'}</button>
                <Waring waring={this.state.hasWarn}/>
            </div>
        )
    }
};

在组件的render方法中返回null，并不会影响组件生命周期函数的调用，所以Waring组件的componentWillUpdate方法和componentDidUpdate方法还是会
被调用

转载于:https://www.cnblogs.com/QxQstar/p/7531356.html