嵌入JS表达式

在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。

let num = 100

let bool = false;

// JSX 语法

var myh1 = (

  <div>

    {/* 我是注释 */}

    {num}

    <hr />

{/* 三目运算 */}

{true ? "条件为真" : "条件为假"}

  </div>

)
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>hell world</title>

</head>

<body>

  <!-- 用于内容显示容器 挂载点 -->

  <div id="app"></div>

  <!-- react核心类库 -->

  <script src="./js/react.development.js"></script>

  <!-- dom操作 -->

  <script src="./js/react-dom.development.js"></script>

  <!-- 解析jsx语法的兼容库 -->

  <script src="./js/babel.min.js"></script>

  <script type="text/babel">

    const app = document.querySelector('#app')

    const num = 11

    // 如果是单行则不需要小括号，多行需要使用小括号括起来

    const vnode = (<div>

      {

        // 注释也是标签 注释不会解析到html中的

        // 我是一个单行注释

        /*

        我是一个多行注释

        */

      }

      <h3>您的年龄为：{num} 岁</h3>

      <hr />

      {

        /* 三目运算 */

      }

      <div>{num > 20 ? '老年' : '儿童'}</div>

    </div>)

    // 把虚拟dom转为真实的dom并挂载到页面中

    ReactDOM.render(vnode, app)

  </script>

</body>

</html>

React jsx中js表达式的更多相关文章

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

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

  2. 在react jsx中使用if判断

    在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...

  3. react jsx 中使用 switch case 示例

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

  4. react native中的欢迎页（解决首加载白屏）

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  5. React入门---JSX内置表达式-6

    个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...

  6. React（三）JSX内置表达式

    (一)JSX是什么? React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 我们不需要一定使用 JSX,但它有以下优点 ...

  7. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  8. 在 React Native 中使用 moment.js 無法載入語系檔案

    moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以 ...

  9. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  10. React JSX语法说明

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

随机推荐

  1. Python数据分析 Series 笔记

    002,pandas介绍 003,Series创建 导入Pandas Series 是一种类似于一维数组的对象,由下面两个部分组成: values:一组数据(ndarray类型) index:相关的数 ...

  2. gRPC入门学习之旅（七）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) gRPC入门学习之旅(六) 3.6.创建gRPC的桌面应用客 ...

  3. leetcode插件问题

    1.使用一段时间后,提交答案一直返回undefind 原因为插件缓存token有效期已过,需要重新登录 2. 重新登录

  4. 精通中间件测试：Asp.Net Core实战指南，提升应用稳定性和可靠性

    引言 在上一章节我们实战了在Asp.Net Core中的项目实战,这一章节讲解一下如何测试Asp.Net Core的中间件. TestServer 还记得我们在集成测试中提供的TestServer吗? ...

  5. 见鬼了！我家的 WiFi 只有下雨天才能正常使用...

    这是作者大学时期在家里遇到的一个非常奇怪的网络问题,作者的父亲是一名经验丰富的网络工程师,他们家里使用了一个复杂的网络设置,通过 Wi-Fi 桥接的方式,将父亲公司的高速商业网络连接到家中.但是有一天 ...

  6. OceanBase初体验之部署生产标准的三节点分布式集群

    前置条件 OceanBase 数据库集群至少由三个节点组成,所以先准备好3台服务器: IP 配置 操作系统 x.x.x.150 Intel x86 12C 64G内存 1T SSD CentOS 7. ...

  7. 微信不再提供小程序打开App？借助H5为App引流的方式你必须知道！

    简介: 2021年5月14日App开发者领域发布了一条重要消息:微信开放平台为了提升用户体验,将于2021年5月20日(后来延期到2021年5月27日)起不再提供"小程序打开App技术服务& ...

  8. 探究 Java 应用的启动速度优化

    简介: Java 的执行效率非常高,约为最快的C语言的一半.这在主流的编程语言中,仅次于C.Rust 和 C++.但在高性能的背后,Java 的启动性能差也令人印象深刻,大家印象中的 Java 笨重缓 ...

  9. DataWorks 功能实践速览03期 — 生产开发环境隔离

    ​简介: DataWorks功能实践系列,帮助您解析业务实现过程中的痛点,提高业务功能使用效率! 往期回顾: DataWorks 功能实践速览01期--数据同步解决方案:为您介绍不同场景下可选的数据同 ...

  10. ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制

    ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制 目录 ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制 每 ...