React笔记7（条件渲染）

条件渲染

在React中，可以创建不同的组件来封装各种所需要的行为，也可以根据应用的变换状态只更新其中一部分。

首先创建一个Gretting组件，他会根据用户是否登录来显示不同的内容。

function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}
  
function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting />
    }else{
        return <GuestGreeting />
    }
}

ReactDOM.render(
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
)

元素变量

你可以使用变量来储存元素，可以用来有条件的渲染组件的一部分，输出的其他部分则不用修改。

以下的2个组件分别代表 注销 和 登录

//定义一个登录按钮小组件
function LoginButton(props){
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    )
}
//定义一个登出按钮小组件
function LogoutButton(props){
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    )
}

然后，我们开始创建一个LoginControl的组件
他会根据当前状态来渲染<LoginButton />和<LogoutButton />以及显示的<Greeting />的内容

//登录状态1
function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}
 //登录状态2
function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}
//条件渲染提示状态语
function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting />
    }else{
        return <GuestGreeting />
    }
}
//创建一个按钮登录小组件
function LoginButton(props){
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    )
}
//创建一个按钮登出小组件
function LogoutButton(props){
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    )
}
//创建一个登录状态控制组件
class LoginControl extends React.Component{
    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn:false};
    }
    handleLoginClick(){
        this.setState({
            isLoggedIn:true
        })
    }
    handleLogoutClick(){
        this.setState({
            isLoggedIn:false
        })
    }
    render(){
        const isLoggedIn = this.state.isLoggedIn;
        let button = null;
        if(isLoggedIn){
            button = <LoginButton onClick={this.handleLogoutClick} />
        }else{
            button = <LogoutButton onClick={this.handleLoginClick} />
        }

        return(
            <div class="box">
                <Greeting isLoggedIn={isLoggedIn} />
                {button}
            </div>
        )
    }
}

ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
)

使用变量并且使用if语句，是条件渲染组件不出的方式，但有时候可以使用更加简洁的方式，可以使用jsx的方式

1.与运算符&&

可以使用花括弧包裹代码嵌入jsx中，其中包括js逻辑与&&，他能很方便的渲染一个元素

function Mailbox(props){
    const unreadMessage = props.unreadMessage;
    return(
        <div>
            <h1>hello</h1>
            {unreadMessage.length>0&&
                <h2>you have {unreadMessage.length} unread message</h2>
            }
        </div>
    )
}

const message = ['react','reactdom','redux'];
ReactDOM.render(
    <Mailbox unreadMessage={message} />,
    document.getElementById('root')
)
//返回  you have 3 unread message

之所以可以这样做，是因为在javascript中，true&&表达式，会返回表达式，而false&&表达式，会返回false，false就会忽略跳过。

2.三目运算符

条件如果成立，执行do someting，否则执行冒号后语句
condition?'do someting':'do noting'
condition?true:false

demo有条件的渲染

//demo1
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
//demo2
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

像在 JavaScript 中一样，你可以根据团队的习惯选择更易读的方式。还要记住如果条件变得过于复杂，可能就是提取组件的好时机了。

3.阻止组件的渲染

在极少的情况下，你可能希望隐藏组件，即使其他组件会渲染该组件，让render方法返回null，而不产生他的渲染结果，就可以实现这个需求。

在下面的例子中，<WarningBanner /> 根据属性 warn 的值条件渲染。如果warn 的值是 false，则组件不会渲染：

function WarningBanner(props){
    if(props.warn){
        return null //或者return false 此处可以停止组件渲染
    }
    return (
        <div className="warning">Warning!!!</div>
    )
}

class Page extends React.Component{
    constructor(props){
        super(props);
        this.state = {showWarning:true};
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }
    handleToggleClick(){
        this.setState(prevState=>({
            showWarning:!prevState.showWarning
        }))
    }
    render(){
        return(
            <div>
                <WarningBanner warn={this.state.showWarning} />
                <button onClick={this.handleToggleClick}>
                    {this.state.showWarning?'warning的值为true':'warning的值为false'}
                </button>
            </div>
        )
    }
}

ReactDOM.render(
    <Page />,
    document.getElementById('root')
)

注意：
组件的render()方法返回null，并不会影响他的生命周期方法的回调，例如componentWillUpdate和componentDidUpdate,依然可以使用。