嵌入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. Node中的EventEmitter? 如何实现一个EventEmitter?

    一.是什么 我们了解到,Node采用了事件驱动机制,而EventEmitter就是Node实现事件驱动的基础 在EventEmitter的基础上,Node几乎所有的模块都继承了这个类,这些模块拥有了自 ...

  2. 我是如何搭建ChatGPT并嵌入到微信公众号的？

    前言 体验方式:薇辛搜索 龚众号 [程序员Jason],关注并点击发消息,点菜单ChatGPT 然后翻到最下面点[阅读原文]就可以了. ChatGPT对某些国家是不提供服务的,所以一般是用不了,除非是 ...

  3. 最最最简单使用Docker部署Wordpress

    普通Docker部署 这种方式我用过,但是总体来说是比较麻烦的.但是可以简单说一下流程,总体流程如下: 安装Docker环境 拉取Wordpress镜像,运行镜像 拉取MySql镜像,运行镜像 Wor ...

  4. 力扣665(java)-非递减数列（中等）

    题目: 给你一个长度为 n 的整数数组 nums ,请你判断在 最多 改变 1 个元素的情况下,该数组能否变成一个非递减数列. 我们是这样定义一个非递减数列的: 对于数组中任意的 i (0 <= ...

  5. 力扣523(java&python)-连续的子数组和（中等）

    题目: 给你一个整数数组 nums 和一个整数 k ,编写一个函数来判断该数组是否含有同时满足下述条件的连续子数组: 子数组大小 至少为 2 ,且子数组元素总和为 k 的倍数.如果存在,返回 true ...

  6. 力扣299(java)-猜数字游戏（中等）

    题目: 你在和朋友一起玩 猜数字(Bulls and Cows)游戏,该游戏规则如下: 写出一个秘密数字,并请朋友猜这个数字是多少.朋友每猜测一次,你就会给他一个包含下述信息的提示: 猜测数字中有多少 ...

  7. 牛客网-SQL专项训练8

    ①在SQL中用条件表示价格在在30至40之间,应该如何表达(B) 解析:IN 与BETWEEN AND的区分 (数字型) 1.in (xx,xx,xx,...)  通常是不连续的,in(30,40)要 ...

  8. OpenYurt：延伸原生 Kubernetes 到边缘场景下的落地实践

    简介: 随着云原生技术的逐步成熟,阿里云容器服务团队在具体落地实践过程中不断探索云原生技术的应用边界.同时随着物联网和 5G 的迅猛发展,传统的边缘计算架构已经不能满足业务发展的需要. 如何基于云原生 ...

  9. 基于 EMR OLAP 的开源实时数仓解决方案之 ClickHouse 事务实现

    ​简介:阿里云 EMR OLAP 与 Flink 团队深度合作,支持了 Flink 到 ClickHouse 的 Exactly-Once写入来保证整个实时数仓数据的准确性.本文介绍了基于 EMR O ...

  10. k8s网页访问实战

    流程: 客户端访问--->ingress七层代理---->service四层代理---->deployment 详细情况:https://www.cnblogs.com/yangme ...