JSX 中的 If-Else
来源:互联网 发布:淘宝联盟下单跟不到单 编辑:程序博客网 时间:2024/06/05 02:09
原文地址:http://wiki.jikexueyuan.com/project/react/else-jsx.html
你没法在JSX中使用 if-else
语句,因为 JSX 只是函数调用和对象创建的语法糖。看下面这个例子:
// This JSX:React.render(<div id="msg">Hello World!</div>, mountNode);// Is transformed to this JS:React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
// JSX 代码:React.render(<div id="msg">Hello World!</div>, mountNode);// 编译成 JS 是这样的:React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
这意味着 if
语句不合适。看下面这个栗子
// This JSX: <div id={if (condition) { 'msg' }}>Hello World!</div> // Is transformed to this JS: React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
这是不合语法的 JS 代码。不过你可以采用三元操作表达式:
React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
当三元操作表达式不够健壮,你也可以使用 if
语句来决定应该渲染那个组件。
var loginButton;if (loggedIn) { loginButton = <LogoutButton />;} else { loginButton = <LoginButton />;}return ( <nav> <Home /> {loginButton} </nav>)
阅读全文
0 0
- JSX 中的 If-Else
- JSX 中的 If-Else
- react with JSX for {if…else…}
- react with JSX for {if…else…}
- Flex中的if...else if...else语句
- if...else中的问题
- EL 中的 else if
- jstl中的if else
- Java中的if-else
- Python中的if-else
- linux 中的if else语句
- bat中的if else用法
- Oracle SQL中的 IF ELSE
- 数据库中的(if-else)
- mybatis xml中的if else
- shell 脚本中的if else
- JavaScript中的if...else if...语句
- 【脚本】shell中的if else if
- leetcode 110. Balanced Binary Tree
- POI导入和导出Excel
- 菜鸟新手的知识汲取(1)网页左右导航栏左右内容显示
- 数据结构复习—栈
- JAVA企业面试题精选 Java SE 71-80
- JSX 中的 If-Else
- Laravel RawCookie
- 常用算法题目总结四(字符串篇)
- CC2530 RF部分使用 ——实现点对点收发
- css伪元素制作消息框
- Mysql备份脚本
- ocp Oracle.1z0-053 711--37
- XML数据在Javascript,HTML中使用
- C++学习(57)