嵌入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. Vue 数据更新但页面没有更新的 7 种情况，你遇到过几种

    1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property ...

  2. 打CS2的时候提示 error:unrec stream cmd 2090 82a

    打CS2的时候提示 error:unrec stream cmd 2090 82a 打着打着就卡住,然后提示error:unrec stream cmd 2090 82a 找了一圈,进bios把内存条 ...

  3. ORA-29278: SMTP transient error: 421 Service not available

    ORA-29278: SMTP transient error: 421 Service not available 一般来说,很可能是邮件服务器连接不上 p_conn := utl_smtp.ope ...

  4. 力扣41(java)-缺失的第一个正数（困难）

    题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数. 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案. 示例 1: 输入:nums = [1,2,0 ...

  5. 力扣524(java)-通过删除字母匹配到字典里最长单词（中等）

    题目: 给你一个字符串 s 和一个字符串数组 dictionary ,找出并返回 dictionary 中最长的字符串,该字符串可以通过删除 s 中的某些字符得到. 如果答案不止一个,返回长度最长且字 ...

  6. IT人才能嗑到的这对CP，甜！

    简介: 提到文件存储,相信大家都不陌生,在浩瀚的存储发展史中,文件存储无疑是璀璨的,耀眼的.那么,在性能已经成为刚需,自动驾驶行业风起云涌的当下,文件存储与GPU这对CP又有怎样的含糖量呢?今天,我们 ...

  7. 数据分析之重要模块pandas

    1.简介 基于Numpy构建 pandas的出现,让Python语言成为使用最广泛而且强大的数据分析环境之一 pandas的主要功能 - 具备诸多功能的两大数据结构 Series.DataFrame( ...

  8. Asp-Net-Core开发笔记：进一步实现非侵入性审计日志功能

    前言 上次说了利用 AOP 思想实现了审计日志功能,不过有同学反馈还是无法实现完全无侵入,于是我又重构了一版新的. 回顾一下:Asp-Net-Core开发笔记:实现动态审计日志功能 现在已经可以实现对 ...

  9. Soluton Set - ZJOI历年真题

    upd:不考浙江省选了.这个题解贴应该不会再更新了. upd:进省队了.再做点,再写点. ZJOI2022 Day1T1 Link&Submission. tag:组合计数,容斥 假设固定了第 ...

  10. 一：大数据架构回顾-Lambda架构

    "我们正在从IT时代走向DT时代(数据时代).IT和DT之间,不仅仅是技术的变革,更是思想意识的变革,IT主要是为自我服务,用来更好地自我控制和管理,DT则是激活生产力,让别人活得比你好&q ...