React系列教程：7. 条件渲染

方式一

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

方式二

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

方式三

<div>
  {isLoggedIn && <AdminPanel />}
</div>

函数组件

// src/components/Hello1.jsx

import { useState } from 'react'

function Hello1 (props) {
    const [ hello1, setHello1 ] = useState('world1')
    setTimeout(() => {
        setHello1('world2')
    }, 2000)
    return (
        <div>
            {/* 使用&&进行条件渲染，前面为true则会渲染后面的，前面为false则不会渲染后面的 */}
            {true && props.children}
        </div>
    )
}

export default Hello1;

类组件

// src/components/Hello2.jsx

import React from "react";

class Hello2 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            hello2: 'world2'
        }
    }

    render() {
        setTimeout(() => {
            this.setState({
                hello2: 'world22'
            })
        }, 2000)
        return (
            <div>
                {/* 使用&&进行条件渲染，前面为true则会渲染后面的，前面为false则不会渲染后面的 */}
                {true && this.props.children}
            </div>
        )
    }

}

export default Hello2