React.js 官网资料摘记：条件渲染

条件渲染

其实就是使用if或者三元运算符做一个判断，根据结果进行输出。

function UserGreeting(props){
    return (
        <h1>Welcome Back !</h1>
    );
}
function GuestGreeting(props){
    return (
        <h1>Please Sign In !</h1>
    );
}
function Greeting(props){
    var isLogin=props.isLogin;
    if(isLogin){
        return <UserGreeting />;
    }else{
        return <GuestGreeting />;
    }
}
ReactDOM.render(
    <Greeting isLogin={true} />,
    document.getElementById('root')
);

元素变量

上面的例子中我们使用的是传递进来的参数，或者我们也可以使用state来保存状态。

class LoginController extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isLogin:false
        };
    }
    handleLoginClick=()=>{
        this.setState({isLogin:false});
    }
    handleLogoutClick=()=>{
        this.setState({isLogin:true})
    }
    render(){
        const isLogin=this.state.isLogin;
        let button=null;
        if(isLogin){
            button=<button onClick={this.handleLoginClick}>登录</button>
        }else{
            button=<button onclick={this.handleLogoutClick}>注销</button>
        }
        return (
            <div>
                {button}
            </div>
        );
    }
}
ReactDOM.render(
    <LoginController />,
    document.getElementById('root')
);

与运算符：&&

在javascript中，当：

true && expression时会返回expression,而false && expression则会返回`false“。

所以可以这样简写：

var isLogin=true;
{isLogin && 
<button>当isLogin为true时会返回该表达式</button>
}

三目运算符

condition?true:false

var isLogin=false;
{isLogin?'欢迎光临':'请先登录'}

阻止组件渲染

设置render的return就可以阻止渲染了。

render(){
    var isLogin=true;
    if(isLogin){
        return null;
    }else{
        return (
            <button>登录</button>
        );
    }
}