在react jsx中如果使用if判断，需要这样做

var loginButton;

if (loggedIn) {

  loginButton = <LogoutButton />;

} else {

  loginButton = <LoginButton />;

}

return (

  <nav>

    <Home />

    {loginButton}

  </nav>

)

在react jsx中使用if判断的更多相关文章

  1. 在react jsx中，为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  2. react jsx 中使用 switch case 示例

    <div> <span>适用平台:</span> <span>{(() => { switch (currentItems.usePlatform ...

  3. 在React native 如何写if判断和for循环

    在vue中一般在需要判断时都是通过if语句来实现的,但是在react native中一般则通过三元运算法来实现. 具体代码如下所示. import React from 'react'; import ...

  4. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

  5. Airbnb React/JSX 编码规范

    Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明 ...

  6. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  7. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  8. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  9. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

随机推荐

  1. [Django] Auth django app with rest api

    First, start the env: . bin/activate Then cd to our module cd djangular Create a new app: python man ...

  2. ant使用ssh和linux交互 如：上传文件

    http://jiajun.iteye.com/blog/741001 http://blog.csdn.net/xymyeah/article/details/4098073 http://blog ...

  3. springmvc使用和经验总结（长沙师说网络科技有限公司）

    springmvc 先分析下代码,高速学习.先要把配置文件写好, 给上2个类详细看看 package com.shishuo.studio.action; import org.apache.log4 ...

  4. Codeforces Round #313 (Div. 2) 560C Gerald&#39;s Hexagon(脑洞)

    C. Gerald's Hexagon time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. Android Snackbar使用方法及小技巧-design

    Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出 要使用Snackbar,需要在项目的build.gradle中添加依赖 depende ...

  6. NOIP 模拟 序列操作 - 无旋treap

    题意: 一开始有n个非负整数h[i],接下来会进行m次操作,第i次会给出一个数c[i],要求选出c[i]个大于0的数并将它们-1,问最多可以进行多少次? 分析: 首先一个显然的贪心就是每次都将最大的c ...

  7. Android Studio教程-创建第一个项目Hello World

    前段时间打开Android studio 在build过程中总会出现以下错误 Error:Execution failed for task ':app:preDebugAndroidTestBuil ...

  8. 分布式系统和CAP

    帽子理论(CAP): C:Consistency,一致性, 数据一致更新,所有数据变动都是同步的 A:Availability,可用性, 好的响应性能,完全的可用性指的是在任何故障模型下,服务都会在有 ...

  9. 更改linux的最大文件描述符限制

    To ensure good server performance, the total number of client connections, database files, and log f ...

  10. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...