前端学习（2229）：react条件渲染实现登录

index.js

import React from 'react';
import ReactDOM from 'react-dom';function UserGree(props) {return ( < h1 > 欢迎登陆 < /h1>)}function UserLogin(props) {return ( < h1 > 请先登陆 < /h1>)}class ParentCom extends React.Component {constructor(props) {super(props)this.state = {isLogin: true}}render() {if (this.state.isLogin) {if (this.state.isLogin) {return ( < UserGree > < /UserGree>)}else {return ( < UserLogin > < /UserLogin>)}}}}//console.log("这是渲染函数")ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果

前端学习（2229）：react条件渲染实现登录相关推荐

前端学习（2230）：react条件渲染实现登录二
import React from 'react'; import ReactDOM from 'react-dom';function UserGree(props) {return ( < ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
react 条件渲染_React中的条件渲染语法
react 条件渲染为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can't Use If-Else and How the Ternary Operator can ...
【前端学习】React学习资料
React 是一种开源的 JavaScript 库,用于构建用户界面.它由 Facebook 开发并维护,已经成为了当今最流行的前端库之一.与其他框架不同,React 主要专注于视图层(View),旨 ...
【前端学习】React学习笔记-事件、生命周期、虚拟DOMdiffing
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 React中的事件处理补充ref 上面的ref在React官网中提到不要被过度使用,在一些情况下可以使用其他方法来获取数据,比如 ...
react 条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript ...
React条件渲染、列表渲染和组件传值
React中实现v-show 父组件 import React from "react"; import Child4 from "./components/Child4 ...
react条件渲染（类似Vue中的v-show或v-if）
一.先定义两个组件 function UserGreeting(props) {return <h1>欢迎回来!</h1>; }function GuestGreeting(p ...

前端学习（2229）：react条件渲染实现登录

前端学习（2229）：react条件渲染实现登录相关推荐

最新文章

热门文章