第八章 react前端开发-条件渲染

React可以创建不同的组件来封装各种行为，还可以根据应用状态变化只渲染其中的一部分。

React 中的条件渲染和JavaScript一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

上面的介绍可能不直观，通常来说，条件渲染就是通过条件不同来渲染不同的页面，类似于其他编程语言中的if else

下面是一个非常典型的条件渲染例子，根据用户是否登录来动态展示提示信息

import React from "react"
import ReactDOM from "react-dom"

function UserGreeting(props) {
    return <h1>欢迎光临!</h1>;
}

function GuestGreeting(props) {
    return <h1>您还没有注册，即将跳转到注册页面</h1>;
}

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

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

结果：

通过上面的例子，相信应该清楚了条件渲染的概念了 

8.2 元素变量

在实际编程中可以使用变量来储存元素。它可以有条件的渲染组件的一部分，而输出的其他部分不会更改。

如下例子所示：

import React from "react"
import ReactDOM from "react-dom"

function UserGreeting(props) {
    return <h1>greeting3</h1>
}

function GuestGreeting(props) {
    return <h1>please reg3</h1>
}

function Greeting(props) {
    const isLogIn = props.isLogIn
    if (isLogIn) {
        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 LoginController extends React.Component {
    constructor(props) {
        super(props)
        this.logInClick = this.logInClick.bind(this)
        this.logOutClick = this.logOutClick.bind(this)
        this.state = {isLogIn : true}
    }

    logInClick() {
        this.setState({
            isLogIn : true
        })
    }

    logOutClick() {
        this.setState({
            isLogIn : false
            }
        )
    }

    render() {
        const isLogIn = this.state.isLogIn
        let button
        if (isLogIn) {
            button = <LogOutButton onClick={this.logOutClick}/>
        } else {
            button = <LogInButton onClick={this.logInClick}/>
        }

        return (
            <div>
                <Greeting isLogIn={false}/>
                {button}
            </div>
        )
    }
}

ReactDOM.render(
    <LoginController />,
    document.getElementById("root")
)

结果：

8.3 与运算符 &&

React支持通过用大括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，可以方便地条件渲染一个元素。

用过javascript的伙伴都知道，在JavaScript 中，true && expression 总是返回后面的expression，而 false && expression 总是返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

下面例子演示了这个功能

import React from "react"
import ReactDOM from "react-dom"

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
        <div>
            <h1>邮箱</h1>
            {unreadMessages.length > 0 &&
            <h2>
                您有 {unreadMessages.length} 条未读信息。
            </h2>
            }
        </div>
    );
}

const messages = ['message1', 'message2', 'message3'];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />,
    document.getElementById('root')
);

结果：

8.4 list使用

import React from "react"
import ReactDOM from "react-dom"

const numbers = [1, 2, 3, 4, 5]
const listnumbers = numbers.map((item) =>
    <li>{item + 1}</li>
);

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <ul>{listnumbers}</ul>
)

结果：