react把表格渲染好ui_在React中实现条件渲染的7种方法

借助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