<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>

<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>

<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var MessageBox = React.createClass({
getInitialState:function () {
return {
isName:true
}
},
getClassName : function () {
return this.state.isName ? 'MyName' : 'NoName'
},
render:function () {
return <div className={this.getClassName()}>11111111111</div>
}
})
React.render(
<MessageBox />,
document.getElementById('example')
)
</script>
</body>

JSX中，不能使用 if/else语句，替代方案：三目运算符

注意，这里说的是在HTML中不能使用if/else语句，在函数中依然可以使用。

react7 react 三目运算的更多相关文章

  1. ng-class结合三目运算

    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...

  2. angularjs的三目运算

    前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...

  3. 【Python全栈笔记】03 [模块二] 16-17 Oct Set 集合，三目运算

    Set 集合 set - unordered collections of unique elements 创建一个set/一个空set # create a new set set1 = {1,2, ...

  4. python函数，lambda表达式，三目运算，列表解析，递归

    一.自定义函数 定义函数时,函数体不执行:只有在调用函数时,函数体才执行.函数的结构: 1. def 2. 函数名 3. 函数体 def func_name(): 函数体 4. 返回值 如果没有声明返 ...

  5. 三目运算的使用&bytes类型转str类型

    一.三目运算的使用 就像c语言中有三目运算符一样,python中也有三目运算符,废话不多说直接上代码 a=3 c=4 b=a if a>c else c print(b) 意思就和 if a&g ...

  6. 三目运算：and/or 技巧

    三目运算:and/or 技巧 and, or 联合起来有个小技巧: print 2 < 3 and True or False 说明:     如果  2 小于 3 了,则输出 True ,  ...

  7. js switch判断 三目运算 while 及 属性操作

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...

  8. day09三目运算

    内容详细 1.三目运算(三元运算) v=前面 if 条件 else 后面 if 条件: v="前面" else: v="后面" #让用户输入值,如果值是整数,则 ...

  9. python运算符,数据类型,数据类型操作,三目运算,深浅拷贝

    算数运算符: Py2中精确除法需要导入:from __future__ import division,(符由特  ,将来的.滴未省,除法) py3不需要导入 赋值运算符: 比较运算符: 成员运算符: ...

随机推荐

  1. springboot使用之四：错误页面404处理建议

    每个项目可能都会遇到404,403,500等错误代码,如没有错误页面,则会给用户一个很不友好的界面,springboot项目同样也存在这个问题. 但在官方文档并没有相关配置信息,这就要求我们自己来实现 ...

  2. android 中View的优化

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  3. JS中可拖拽的甘特图和流程图

    甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...

  4. IOS和Android支持的音频编解码

    1.IOS编码 参考文档地址:https://developer.apple.com/library/ios/documentation/AudioVideo/Conceptual/Multimedi ...

  5. getIdentifier()获取资源Id

    工作需要使用getIdentifier()方法可以方便的获各应用包下的指定资源ID.主要有两种方法:(1)方式一Resources resources = context.getResources() ...

  6. 在WPF的WebBrowser控件中屏蔽脚本错误的提示

    在WPF中使用WebBrowser控件显示网页时,经常会报脚本错误的提示,如何屏蔽掉这些错误提示呢.方法是定义如下方法: public void SuppressScriptErrors(WebBro ...

  7. Linux内核--网络栈实现分析（八）--应用层发送数据（下）

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7547826 更多请查看专栏,地 ...

  8. flashcache

    Flashcache系统管理员手册 1.简介Flashcache 是为Linux操作系统开发的块设备回写缓存内核模块,使用了Device Mapper的方式实现,本文档可指导你快速掌握Flashcac ...

  9. unity 实现简单的分离

    在网上随便搜一搜资料就可以找到很多关于Mvc ,MVVM,StrangeIoc等有关显示与数据分离的博客,很多大神也是讲的蛮有道理的,但是这些框架理解起来有一定的难度, 这时候肯定有人说有现成的框架为 ...

  10. webapi 中使用 protobuf

    相比json来说,好处是速度更快,带宽占用更小.其效果大致等于json+Gzip. 在webapi中使用protobuf的方法为: 引用nuget包 Install-Package protobuf- ...