在jsx中绑定js表达式以及jsx注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">const user = {name: 'Jack',age: 18,gender: 0}// const element = (//   <div>//     <p>{1 + 1}</p>//     <p>{'hello'}</p>// //     {//       // 不推荐//       // 这是 jsx 和 EcmaScript 6 模板字符串混搭//     }// //     {/* 推荐：单行注释 */}//     {/*//       * 推荐：多行注释//       * 这是 jsx 和 EcmaScript 6 模板字符串混搭//       */}//     <p>{`hello ${user.name}`}</p>//     <p>姓名：{user.name}</p>//     <p>年龄：{user.age}</p>//     <p>性别：{user.gender === 0 ? '男' : '女'}</p>//   </div>// )ReactDOM.render(element,document.getElementById('app'))
</script>
</body>
</html>

在jsx中绑定js表达式以及jsx注释相关推荐

react 在JXL中嵌入JS表达式
为什么要嵌入JS表达式? 答:因为数据存储在js中如何在JXL中嵌入JS表达式? 答:使用{} //导入react import React from "react"; impo ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
jsx怎么往js里传参数_JSX语法使用详解——终极版
一.基础 1.JSX是什么 JSX是一种像下面这样的语法: const element = Hello, world! ; 它是一种JavaScript语法扩展,在React中可以方便地用来描述UI. ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
js 字符串插入_前端利器React，为什么推荐JSX来替换JS
前端框架这几年更新非常快,传统的Boostrap.Jquery已经慢慢退位,现在大行其道的是React和Vue.其中就出身来讲,React来自科技巨头Facebook,似乎更牛逼一点. React 自 ...
React中文文档之introducing JSX
introducing JSX 思考下面的变量声明: const element = <h1>Hello world!</h1>; 这个有趣的标签解析,既不是字符串,也不是HT ...
Vue 中如何配置项目支持 JSX 语法
Vue 是使用的的模板语法,Vue的模板实际上就是编译成了 render 函数,同样支持 JSX 语法.在 Vue 官网中,提供 createElement 函数中使用模板中的功能. createEl ...
react领域里面jsx中的style的值为什么放到了{}中
我的疑问是: jsx中的style为什么不是像html中写字符串?而是使用javascript object? 同类提问: 关于 React 为什么使用 JS Object 代替 CSS 来创建样式? ...

在jsx中绑定js表达式以及jsx注释

在jsx中绑定js表达式以及jsx注释相关推荐

最新文章

热门文章