嵌入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. 嘉楠k210 kd233官方demo板gpio点灯实验

    使用maixpy  micropython开发 import utime from Maix import GPIO from board import board_info from fpioa_m ...

  2. PTA三次作业

    1.前言: 第一次作业难度较大,从无到有的设计,涉及到的主要类有Paper,Question,AnswerPaper,Main,主要题目方向为字符串判断与字符串处理(提取有效信息),判断对错算总分,配 ...

  3. 力扣436(java&python)-寻找右区间（中等）

    题目: 给你一个区间数组 intervals ,其中 intervals[i] = [starti, endi] ,且每个 starti 都 不同 . 区间 i 的 右侧区间 可以记作区间 j ,并满 ...

  4. 模仿Spring实现一个类管理容器

    ​简介: 项目的初衷是独立作出一个成熟的有特色的IOC容器,但由于过程参考Spring太多,而且也无法作出太多改进,于是目的变为以此项目作为理解Spring的一个跳板,与网上的一些模仿Spring的框 ...

  5. dotnet 6 精细控制 HttpClient 网络请求超时

    本文告诉大家如何在 dotnet 6 下使用 HttpClient 更加精细的控制网络请求的超时,实现 HttpWebRequest 的 ReadWriteTimeout 功能 本文将介绍如何在 Ht ...

  6. GitHub 的 Action 接入 Stryker.NET 进行自动化测试单元测试鲁棒性

    假设有一个捣蛋的小伙伴加入了你的团队,这个捣蛋的小伙伴喜欢乱改代码,请问此时的单元测试能否拦住这些逗比行为?如果不能拦住逗比行为,是否代表着单元测试有所欠缺,或者有某些分支逻辑没有考虑到.本文将告诉大 ...

  7. QT使用外部库

    一.简述 当QT使用第三方库时,编译会报错,哪怕是使用linux下的软件库时都有可能报错,所以在使用的时候需要添加一下外部库的路径,这里我以mosquitto的库函数为例,主要的导入方式有两种. 二. ...

  8. 利用引用传递一次遍历构造菜单树(附java&go demo)

    目录 原理讲解 java demo Go demo 优点 原理讲解 利用引用传递,当儿子的儿子变动的时候,自己的儿子的儿子也变动(取地址) java demo package com.huiyuan. ...

  9. 2023 Stack Overflow 调研

    一.Programming, scripting, and markup languages 二.Databases 三.Web frameworks and technologies 四.Other ...

  10. Centos7 忘记密码的解决方法

    ilo远程修改 重启服务器,点击cold boot 按钮. 开机后,进入内核上按"e",进入编辑模式 在linux删除linux16这一行的地方,写入如下语句,在*.img行之前. ...