##### 使用 if/else 语句

可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。

import React from 'react';
function ConditionalRender(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <UserGreeting />;} else {return <GuestGreeting />;}
}
function UserGreeting() {return <h1>Welcome back!</h1>;
}
function GuestGreeting() {return <h1>Please sign up.</h1>;
}
export default ConditionalRender;

##### 使用三元运算符

另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。

import React from 'react';
function ConditionalRender(props) {const isLoggedIn = props.isLoggedIn;return (<div>{isLoggedIn ? (<UserGreeting />) : (<GuestGreeting />)}</div>);
}
function UserGreeting() {return <h1>Welcome back!</h1>;
}
function GuestGreeting() {return <h1>Please sign up.</h1>;
}
export default ConditionalRender;

 使用逻辑 && 运算符

在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。例如：

import React from 'react';
function ConditionalRender(props) {const isLoggedIn = props.isLoggedIn;return (<div>{isLoggedIn && <UserGreeting />}{!isLoggedIn && <GuestGreeting />}</div>);
}
function UserGreeting() {return <h1>Welcome back!</h1>;
}
function GuestGreeting() {return <h1>Please sign up.</h1>;
}
export default ConditionalRender;

##### 使用条件运算符

有时需要更复杂的条件逻辑，可以使用条件运算符 (`? :`)：

import React from 'react';
function ConditionalRender(props) {const isLoggedIn = props.isLoggedIn;const isAdmin = props.isAdmin;return (<div>{isLoggedIn ? (isAdmin ? (<h1>Welcome admin!</h1>) : (<h1>欢迎 用户</h1>)) : (<h1>请先登录</h1>)}</div>);
}
export default ConditionalRender;