React基础教程(十三)

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

1.条件渲染

我们可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。

在下面的例子中，我们将要创建一个名为 LoginControl 的有状态的组件。它会根据当前的状态来渲染或，它也将渲染前面例子中的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
    <!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

</div>


<script type="text/babel">

    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;

            if (isLoggedIn) {
                button = <LogoutButton onClick={this.handleLogoutClick} />;
            } else {
                button = <LoginButton onClick={this.handleLoginClick} />;
            }

            return (
                <div>
                    <Greeting isLoggedIn={isLoggedIn} />
                    {button}
                </div>
            );
        }
    }

    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/>;
    }

    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>
                登陆
            </button>
        );
    }

    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>
                退出
            </button>
        );
    }

    ReactDOM.render(
        <LoginControl />,
        document.getElementById('app')
    );
</script>
</body>
</html>