借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染。
条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在react文档中,这是一种根据条件渲染不同元素或组件的方法。此概念通常被应用到如下情况中:
从API渲染外部数据显示/隐藏元素切换应用程序功能实现权限级别认证与授权
在本文中,我们将研究在React应用程序中实现条件渲染的7种方法。
挑战
首先,根据在组件state中isLoggedIn的值,我们希望能够在用户未登入时显示Login按钮,在用户登入时显示Logout按钮。
下图是我们初始组件的截图:
代码如下:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true
};
}
render() {
return (
This is a Demo showing several ways to implement Conditional Rendering in React.
Login
Logout