JSX 中的 If-Else
来源:互联网 发布:花生壳软件联系电话 编辑:程序博客网 时间:2024/06/05 05:52
JSX 中的 If-Else
你没法在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
- How NOT To Evaluate Your Dialogue System
- golang.org/x/time/rate 使用说明
- 设计模式之单例模式
- python获取照片的拍摄日期并重命名
- am 命令集
- JSX 中的 If-Else
- linux 下 .sh 文件语法
- TCP与UDP的区别总结
- oracle查看允许的最大连接数和当前连接数等信息
- Java中Try...Catch和Throw异常处理小结
- mybatis总结
- mongodb dirver for java【写入操作】
- Python,学习的开始
- ssm框架集成详解