嵌入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. Faiss 向量库编译安装

    Faiss 是 Facebook 开源的一套高效相似性搜索以及向量聚类的开发库,支持各类相似性搜索的算法,Faiss 项目本身是使用 C++ 编写的,但是提供 Python 的绑定,可以直接使用 nu ...

  2. 力扣613(MySQL)-直线上的最近距离（简单）

    题目: 表 point 保存了一些点在 x 轴上的坐标,这些坐标都是整数. 写一个查询语句,找到这些点中最近两个点之间的距离. 最近距离显然是 '1' ,是点 '-1' 和 '0' 之间的距离.所以输 ...

  3. 剑指企业级云原生，阿里云 CNFS 如何破局容器持久化存储困境

    简介: 云原生趋势下,应用容器化比例正在快速增长,Kubernetes 也已成为云原生时代新的基础设施. 据 Forrester 预测,到 2022 年, 全球企业及组织在生产环境运行容器化应用.观察 ...

  4. vue--v-if和v-show的区别（个人项目中的理解应用）

    在面试的时候,一道vue基础到不能再基础的面试题叫做v-if与v-show的区别,当然答案网上一搜一大堆,基本两句话就能说明: 1.相同点:都是根据指令是否渲染该组件 2.不同点:v-if仅重新渲染当 ...

  5. 11K+ Star！图解计算机网络、操作系统、计算机组成、数据库！

    大家好,我是 Java陈序员. 俗话说得好,面试造火箭,入职拧螺丝.我们在工作中,其实很少用到一些计算机底层知识,往往只要编码完事.但是,知其然还要知其所以然,我们不仅要做一个合格的"CV ...

  6. CF-943(已更B-E)

    CF- 943(已更 B-E) D赛时没调出来(╬▔皿▔)╯,还有几分钟的时候反而把E过了,本来应该是上大分一场(⊙﹏⊙),等会会补G1 这假期要刷题,还要补文化课--后面有空的话更一下之前打的线下赛 ...

  7. 【工程实践】go语言实现MerkleTree

    简介 默克尔树(MerkleTree)是一种典型的二叉树结构,其主要特点为: 最下面的叶节点包含存储数据或其哈希值: 非叶子节点(包括中间节点和根节点)的内容为它的两个孩子节点内容的哈希值. 所以底层 ...

  8. 数据库—SQL语言学习

    文章目录 SQL 数据类型 重要的关键字 定义数据库 数据库的文件 table创建与删除 表的定义 表的alter 表的删除 视图 定义视图 删除视图 更新视图 插入视图 视图总结 索引 SQL单表查 ...

  9. 4G EPS 第四代移动通信系统

    目录 文章目录 目录 4G EPS 4G EPS 4G(the 4th generation mobile communication technology,第四代移动通信技术)提供了 3G 不能满足 ...

  10. yum install --downloadonly

    yum install --downloadonly --downloaddir=[directory] [package] https://www.cnblogs.com/wangbaobao/p/ ...