react如何根据状态判断展示
根据状态条件渲染
在React中可以通过状态（state）和条件语句动态控制UI渲染。常见方法包括if/else、三元运算符、逻辑与（&&）运算符等。
function ExampleComponent() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
if (isLoggedIn) {
return <div>Welcome User!</div>;
} else {
return <div>Please log in.</div>;
}
}使用三元运算符
适用于简单的条件渲染场景，语法更简洁。
function ExampleComponent() {
const [isLoading, setIsLoading] = useState(true);
return (
<div>
{isLoading ? <Spinner /> : <Content />}
</div>
);
}逻辑与运算符
适合只在条件为真时渲染某个组件的情况。
function ExampleComponent() {
const [hasError, setHasError] = useState(false);
return (
<div>
{hasError && <ErrorModal />}
<MainContent />
</div>
);
}枚举渲染
当需要根据不同状态值渲染不同组件时，可以使用对象枚举方式。
function StatusComponent() {
const [status, setStatus] = useState('loading');
const statusMap = {
loading: <Loader />,
success: <SuccessMessage />,
error: <ErrorMessage />
};
return <div>{statusMap[status]}</div>;
}使用Hooks组合
复杂场景下可以自定义Hook封装状态逻辑。
function useToggle(initialState = false) {
const [state, setState] = useState(initialState);
const toggle = () => setState(!state);
return [state, toggle];
}
function ToggleComponent() {
const [isOn, toggleIsOn] = useToggle(false);
return (
<button onClick={toggleIsOn}>
{isOn ? 'ON' : 'OFF'}
</button>
);
}注意事项
- 避免在渲染逻辑中包含过多业务判断，建议将复杂逻辑抽离到单独函数中
- 当条件分支较多时，考虑使用策略模式或状态机管理渲染逻辑
- 对于异步数据加载场景，建议结合
Suspense和错误边界处理
以上方法可根据具体场景组合使用，保持组件逻辑清晰可维护。
