嵌入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. P9562 [SDCPC2023] G-Matching 题解

    题目描述 给定长度为 \(n\) 的整数序列 \(a_1, a_2, \cdots, a_n\),我们将从该序列中构造出一张无向图 \(G\).具体来说,对于所有 \(1 \le i < j \ ...

  2. 企业上云如何对SLS日志审计服务进行权限控制

    简介: 日志审计是信息安全审计功能的核心部分,是企业信息系统安全风险管控的重要组成部分.SLS的日志审计服务针对阿里云的多种云产品(Actiontrail.OSS.SLB.RDS.PolarDB.SA ...

  3. 重磅 | 数据库自治服务DAS论文入选全球顶会SIGMOD，领航“数据库自动驾驶”新时代

    简介: 近日,智能数据库和DAS团队研发的智能调参ResTune系统论文被SIGMOD 2021录用,SIGMOD是数据库三大顶会之首,是三大顶会中唯一一个Double Blind Review的,其 ...

  4. 5分钟搞定Loki告警多渠道接入

    ​简介: Loki是受Prometheus启发的水平可扩展.高可用.多租户日志聚合系统.用户既可以将Loki告警直接接入SLS开放告警,也可以先将Loki接入Grafana或Alert Manager ...

  5. 七天.NET 8操作SQLite入门到实战 - （2）第七天Blazor班级管理页面编写和接口对接

    前言 上一章节我们引入BootstrapBlazor UI组件完成了EasySQLite后台界面的基本架子的搭建,本章节的主要内容是Blazor班级管理页面编写和接口对接. 七天.NET 8 操作 S ...

  6. 国产 Web 组态软件 TopStack V5.0 发布

    简介 TopStack 是一款轻量型 Web 组态软件,提供设备数据采集.定时任务.控制策略.联动控制.设备告警.设备维护管理.设备绩效管理.能源管理.组态开发.报表开发等核心功能.支持移动端访问,支 ...

  7. vue解决二级路由redirect（默认路由）不传参的问题

    场景: pageA----pageB(pageB包含三个二级路由) 默认进入pageB时进入第一个页面的路由,之后点击左侧按钮,分别进入其他二级路由 原router.js写法: //应用信息      ...

  8. 记录几十页html生成pdf的历程和坑(已用bookjs-easy解决)(生成、转换、拼接pdf)

    懒得看的朋友,先说最终解决办法,主力为 前端依靠插件 bookjs-easy(点击直接跳转官网)并跳转到下面的第三点查看 接下来详细记录下整个试探的方向和历程 项目需求:是生成一个页数达到大几十页的p ...

  9. 如何禁用IntelliJ IDEA的LightEdit模式

    更新pycharm之后发现有了个新功能,默认打开文件的时候会单独打开一个窗口,以文本编辑的模式打开,而不是用项目模式.这种打开方式被称为LightEdit Mode.效果如下, 可以注意到窗口很简洁, ...

  10. R5_ES读写流程

    基本概念 refresh:es接收数据请求时先存入ES进程中的内存 Buffer ,默认每隔一秒(index.refresh_interval:1s)会从内存buffer中将数据写入 os cache ...