react 中的条件渲染允许您根据某些条件（例如状态或道具）渲染不同的组件或元素。以下是一些实现条件渲染的常用方法：
1. 使用 if-else 语句
您可以在组件内使用标准 javascript if-else 语句。
function mycomponent({ isloggedin }) {
if (isloggedin) {
return <h1>welcome back!</h1>;
} else {
return <h1>please sign in.</h1>;
}
}
2. 使用三元运算符
这是一种根据条件呈现内容的简洁方法。
function mycomponent({ isloggedin }) {
return (
<h1>
{isloggedin ? 'welcome back!' : 'please sign in.'}
</h1>
);
}
3. 使用逻辑&&运算符
仅当条件为真时，您才可以使用逻辑 and 运算符来渲染组件。
function mycomponent({ isloggedin }) {
return (
<div>
{isloggedin && <h1>welcome back!</h1>}
{!isloggedin && <h1>please sign in.</h1>}
</div>
);
}
4. switch 语句
对于更复杂的条件，可以使用 switch 语句。
function mycomponent({ status }) {
switch (status) {
case 'loading':
return <h1>loading...</h1>;
case 'success':
return <h1>data loaded successfully!</h1>;
case 'error':
return <h1>there was an error!</h1>;
default:
return null;
}
}
例子
这是使用功能组件的完整示例：
import React from 'react';
function App() {
const [isLoggedIn, setIsLoggedIn] = React.useState(false);
return (
<div>
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? 'Logout' : 'Login'}
</button>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
</div>
);
}
export default App;
概括
根据您的情况复杂程度和个人编码风格选择最适合您需求的方法。如果您需要更多示例或解释，请告诉我！
