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.jsximport { 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.jsximport 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