添加一段用户登录场景,登录显示登录信息,否则显示非登录信息。
使用Angularjs我们可以这样做:
<div class="logined" ng-show="isLogin">登录了</div> <div class="logined" ng-if="isLogin">你好,{userName}</div> <div class="no-login" ng-hide="isLogin">未登录</div>
那我们使用React要怎么去实现这样的场景呢?
React.createClass({ getInitialState: function() { return { isLogin: true, userName: 'Joe' }; }, render: function() { var isLogin = this.state.isShowLoginMenu, loginHtml; if (isLogin) { loginHtml = <div className="logined"> 登录了,欢迎{this.state.userName} </div>; } else { loginHtml = <div className="no-login"> 未登录 </div>; } return ( <div className="user"> {loginHtml} </div> ); }
相关推荐
react项目使用react-dnd实现拖拽排序
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, Text, TouchableOpacity, ...
比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 <i className={header...
React-Native-SmartRefreshLayout是基于Android SmartRefreshLayout 开发的插件 ,可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义 HeaderComponent现在支持任意的RN组件,但是需要放在AnyHeader的...
Hooks Admin,基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。
├─1113_AM_React-basic-1.mp4 ├─1113_AM_React-basic-2.mp4 ├─1113_AM_React-basic-4.mp4 ├─1113_PM_React-basic-3.mp4 ├─1114_AM_React-basic-5.mp4 ├─1114_AM_React-basic-6.mp4 ├─1114_PM_React-...
安装@nicecactus/ng-react-module-wrapper : 使用 : npm install -S @nicecactus/ng-react-module-wrapper 含: yarn add @nicecactus/ng-react-module-wrapper 将模块添加到NgModule导入 AppModule import { ...
用于Web实现React-native-linear-gradient的React Native 入门 $ npm install react-native-web-linear-gradient --save 别名打包您的webpack配置中: resolve: { alias: { 'react-native': 'react-native-web...
react-jsonschema-form - 一个React组件用于从JSONSchema构建Web表单
1.实现播放、暂停视频;...下载代码之后:npm install,然后npm start,然后npm link 安装包(react-native link react-native-orientation,react-native link react-native-video),然后再链接即可查看效果
项目地址:https://github.com/race604/react-native-viewpager 效果图:使用说明: 运行 npm 安装 react-native-viewpager --save代码如下:var ViewPager = require('react-native-viewpager'); ...
react-native-image-picker 使用demo 详见:https://github.com/pheromone/mycamera
react-native-charts-wrapper图表库页面布局使用案例,资源仅包含页面布局样式展示,可结合博客https://blog.csdn.net/zcmain/article/details/107909374观看
react-native-qrcode-svg 基于react-native-svg和javascript-qrcode的React Native QR码生成器。 讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-...
Android-react-native-image-crop-picker.zip,iOS/Android图像选择器,支持相机、视频、可配置压缩、多个图像和裁剪,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核...
react-native-svg-uri, 在来自URL或者 static 文件的本地响应中,呈现SVG图像 react-native-svg-uri从URL或者 static 文件中呈现来自React的SVG图像这是用 rn 0.33和 react-native-svg 4.3.1 ( 依赖于此库) react-...
react-native-sms, 支持iOS和Android的短信发送方 react-native-sms用户定义的SendSMS使用这个 rn 组件发送带有回调 (completed/cancelled/error). iOS和Android的短信。目前,只支持用户发送短信。 this react-na
React本机aes gcm密码适用于React Native的AES-GCM加密/解密要求iOS> = 13.0 Android> = 26安装npm install react-native-aes-gcm-crypto用法import AesGcmCrypto from 'react-native-aes-gcm-crypto' ;const key = ...
react-native-simple-toast, 简单的Toast React react-native-simple-toast对安卓和iOS的本机Toast组件进行反应。 它让iOS拥有与安卓相同的toast性能。 使用 scalessec/toast iOS ;安装你可以使用 rnpm插件轻松安装...