React—条件渲染不同的组件

2023-10-27

import React from 'react';
import ReactDom from 'react-dom';

class UserGreeting extends React.Component {
    render () {
        return (<h1>欢迎回来!</h1>)
    }
}
class GuestGreeting extends React.Component {
    render () {
        return (<h1>请先注册!</h1>)
    }
}
class Greeting extends React.Component {
    render () {
        if (this.props.isLogin == false) {
            return (
                <GuestGreeting></GuestGreeting>
            )
        } else {
            return (
                <UserGreeting></UserGreeting>
            )
        }
    }
}

ReactDom.render(
    <div>
        <Greeting isLogin={true}></Greeting>
    </div>,
    document.getElementById('root')
)


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React—条件渲染不同的组件 的相关文章

  • React 初识之Umi项目搭建实战

    一 创建项目 创建之前需要安装 Node js 和 npm yarn 这俩个环境 在WebStorm里面创建一个项目 输入命令 yarn create umi 弹出选项 这里我们选择第二项APP 选择是否使用typescript 这里选no
  • React Router 路由守卫

    React Router 路由守卫 组件内路由守卫 1 下面是使用高阶组件实现路由守卫的示例代码 import React from react import Route Redirect from react router dom con
  • state和props的区别__react

    首先说明 state和props是每个组件都有的 其次 state可变 但props不可变 这是官网给出的说法 但实操过程中 state的确可变 但props也可以变 是不是fb搞错了 当然不是 这里的可变与不可变 说的是改变后 是否会重新
  • 【前端】react-markdown配置解析

    文章目录 react markdown基本配置 同步预览配置 MdEditorComponent js reducer js initBlogState js action types js sync actions js store js
  • React学习之扩展浅比较(三十四)

    注意 这玩意也已经被React PureComponent的功能取代了 这里依旧是提一下 主要是React v15的版本中的react with addons js 这些玩意还存在 哎 害人呐 引入 import shallowCompar
  • react的条件渲染(或者组件渲染)五种方式 --开发基础总结

    1 使用if的方式判断是否渲染某个组件 function UserGreeting props return h1 Welcome back h1 function GuestGreeting props return h1 Please
  • 【React】路由(详解)

    目录 单页应用程序 SPA 路由 前端路由 后端路由 路由的基本使用 使用步骤 常用组件说明 BrowserRouter和HashRouter的区别 路由的执行过程 默认路由 精确匹配 Switch的使用 重定向路由 嵌套路由 向路由组件传
  • 对 React Hook的闭包陷阱的理解,有哪些解决方案?

    hooks中 奇怪 其实符合逻辑 的 闭包陷阱 的场景 同时 在许多 react hooks 的文章里 也能看到 useRef 的身影 那么为什么使用 useRef 又能摆脱 这个 闭包陷阱 搞清楚这些问题 将能较大的提升对 react h
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • 组件间样式覆盖问题--CSS Modules

    1 组件间样式覆盖问题 问题 CityList 组件的样式 会影响 Map 组件的样式 原因 在配置路由时 CityList 和 Map 组件都被导入到项目中 那么组件的样式也就被导入到项目中了 如果组件之间样式名称相同 那么一个组件中的样
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • React路由懒加载的实现

    React lazy 通过引入lazy Suspense两个方法实现路由懒加载 首先 我们需要在组件中引入lazy Suspense这两个方法 然后我们需要通过Suspense组件 包裹着注册路由 import React Componen
  • Notion笔记搭建博客网站 - NotionNext

    NotionNext是什么 NotionNext是我在Github上开源的基于Next js框架开发的博客生成器 目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站 从而专注于写作 而不需要操心网站的维护 它将您的Notion笔记
  • React中使用if else 条件判断

    在react中用jsx渲染dom的时候经常会遇到if条件判断 然而在jsx中竟是不允许if条件判断的 以下有几种判断方式 可以根据自己的应用场景 挑选适合的 方案一 class HelloMessage extends React Comp
  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a
  • hook中使用ref使用

    对于antd的fom表单 hook使用ref import React useState useEffect useRef from react const dateRef useRef dateRef current setFieldsV
  • React(一):React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea
  • Umi+Dva初印象<基础应用,结构,流转逻辑>

    目录 前言 知识储备 generator函数 Dva初识 实际交互 函数式组件 class组件 前言 项目初始为umi脚手架进行初始化 lt 初始化过程 http t csdn cn cuTaY gt 工程中加载了umi自带的antd ui
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

  • Python深度学习篇四《机器学习基础》

    前言 前期回顾 Python深度学习篇三 神经网络入门 上面这篇里面写了关于向量数据最常见的机器学习任务 好 接下来切入正题 本章包括以下内容 除分类和回归之外的机器学习形式 评估机器学习模型的规范流程 为深度学习准备数据 特征工程 解决过
  • 「AI初识境」深度学习中常用的损失函数有哪些?

    https www toutiao com a6695152940425937411 这是专栏 AI初识境 的第11篇文章 所谓初识 就是对相关技术有基本了解 掌握了基本的使用方法 今天来说说深度学习中常见的损失函数 loss 覆盖分类 回
  • 代码审查清单

    代码审查清单 常规项 代码能够工作么 它有没有实现预期的功能 逻辑是否正确等 所有的代码是否简单易懂 代码符合你所遵循的编程规范么 这通常包括大括号的位置 变量名和函数名 行的长度 缩进 格式和注释 是否存在多余的或是重复的代码 代码是否尽
  • 在开发中,我们需要对后端返回来的数据进行转型,后端返回的字符串类型,布尔类型,进行使用

    后端返回 num 12 598 num2 11 222 这种字符串的数字 在前端需要根据这个数字来做一些判断的时候 直接 if num gt num2 console log 方法 这样子操作 很明显是不可以的 所以我们需要进行转换数据类型
  • wsl ubuntu拒绝访问_用WSL轻松实现WinLinux双系统

    在很多的情况下 我们对Linux具有不可替代的需求 但Ps Pr等工具的适用场景也使得我们不能抛弃Windows 面对此种情状 大部分人要么会选择使用虚拟机 要么则会选择双系统 但事实上 过于臃肿的虚拟机系统会使得硬件资源的占用率非常高 进
  • personal Richard photo picture

  • 更新Android studio后 sdk没有tools目录,无法使用device monitor

    谷歌在较新版本的android studio内去除了DDMS的支持 用其他功能代替 而日常开发测试中 Device Monitor的应用还是非常方便的 那么 问题来了 如何继续使用DDMS这款调试神器 如何在谷歌已经弃用的情况下 重新安装a
  • ES6入门八:Promise异步编程与模拟实现源码

    Promise的基本使用入门 实例化promise对象与注册回调 宏任务与微任务的执行顺序 then方法的链式调用与抛出错误 throw new Error 链式调用的返回值与传值 Promise的基本使用进阶 then catch fin
  • 查询oracle数据库里的表空间利用率

    select a tablespace name round a total size total size MB round a total size round b free size 3 used size MB round b fr
  • @RequestBody与@ResponseBody的区别以及@PathVariable的用法

    一 RequestBody RequestBody的作用是将前端传来的json格式的数据转为自己定义好的javabean对象 前端向后端传递数据 图中以json数据为例 需要注意的是传入数据的属性名称要和后端javabean中定义的一致 注
  • 多层网络的反向传播算法

    目录 一 可微阈值单元 二 多层网络的反向传播算法 1 反向传播算法推导 2 两层sigmoid单元网络训练算法的表示 3 任意深度层次有向无环网络训练算法的表示 三 小结 在 感知器的数学表达和训练算法一节中 重点学习了ANN系统中单个单
  • 腾讯云Ubuntu部署Django(Django + uwsgi +nginx + MySQL)

    目录 前言 一 环境版本信息 二 准备Ubuntu的python3环境 python3 8 3 1 安装编译环境 2 下载Python源码 3 解压 4 配置安装选项 5 编译 安装 6 设置软连接 三 Ubuntu下安装virtualen
  • Java接入Spark之创建RDD的两种方式和操作RDD

    首先看看思维导图 我的spark是1 6 1版本 jdk是1 7版本 spark是什么 Spark是基于内存计算的大数据并行计算框架 Spark基于内存计算 提高了在大数据环境下数据处理的实时性 同时保证了高容错性和高可伸缩性 允许用户将S
  • android 图表实现,Android实现图表绘制和展示

    本文演示在Android平台中绘制和展示图表示例 本示例是基于RChart 2实现的 在一个系统中经常要用到图表统计数据 在WEB开发中图表绘制是一件简单的事情 因为有比较多的开源方案 但在Android中开源方案并不多 Android中绘
  • C#中的 属性 字段 成员变量

    1 首先属性和字段都是成员变量 2 其次属性和字段都是用来存储数据的 3 属性和字段的区别 class test private int a 1 public int A get return a set a value 字段 privat
  • OrCAD PSPICE 仿真 问题集

    1 创建SIM 文件时出现 cannot initialize profile A 所有路径也都是英文路径 B 检查下安装目录下的SPB 16 6 tools pspice目录下的orsimsetup dll是不是还在 也可以找个新的文件替
  • 左神算法与数据结构全阶课上笔记(1)——排序算法(C++实现)

    算法与数据结构新手班 class01 尾田改写C 版 B站视频地址 https bilibili com video BV1g3411i7of p 8 spm id from pageDriver class01代码github地址 htt
  • org.apache.catalina.core.StandardWrapperValve invoke的解决办法

    故障码 Servlet service for servlet servletAction threw exception java lang NullPointerException at com dbdao mysql mySqlCon
  • Java 面向对象之继承

    目录 1 类和包 2 static 关键字 3 继承 3 1 继承的特点 3 2 继承中成员变量的访问特点 3 3 继承中成员方法的访问特点 3 4 方法重写 3 5 继承中构造方法的访问特点 4 抽象类 5 模板设计模式 6 final
  • React—条件渲染不同的组件

    import React from react import ReactDom from react dom class UserGreeting extends React Component render return h1 欢迎回来