react 在JXL中嵌入JS表达式

为什么要嵌入JS表达式?
答:因为数据存储在js中

如何在JXL中嵌入JS表达式?

答:使用{}

//导入react
import React from "react";
import ReactDOM from "react-dom";//1 使用jxl创建react元素
const name = "小名"
const age = "9"
const title = (<h1 className="title"> hello jsx 我是{name},我今年{age}岁</h1>)//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

效果

备注:

1 {}可以使用任意的javaScipt表达式

2 JXL自身也是javaScipt表达式

//导入react
import React from "react";
import ReactDOM from "react-dom";//1 使用jxl创建react元素
const name = "小名"
const age = "9"
//{}可以使用任意的javaScipt表达式
const sayhello = ()=> "hello world"
const div = (<div>我是div</div>)
const title = (<h1 className="title"> hello jsx 我是{name},我今年{age}岁<p>{1}</p><p>{'2'}</p><p>{1 + 2}</p><p>{3 > 2 ? "true" : "false"}</p><p>{sayhello()}</p>{div}</h1>)//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

效果

箭头函数

形式:
   ()=>{}

箭头函数和正常函数的不同
   1 默认return, 所以return可以省略
   2 没有this ,this 指向上一级的this
   3 一个参数可省略(),一条语句可省略{}
   4 若写return,就需要写{},一条语句时,他俩都可以省略

react 在JXL中嵌入JS表达式相关推荐

高仿【华为消费者业务官网】和精彩动画剖析：练习在低代码平台中嵌入JS代码
本课程是华为消费者业务官网的仿站习作. 页面排版精美,照搬原站UI,一键导入HTML和CSS,还原度非常高,达到以假乱真的程度. 本课程重点是带领读者学习如何在众触低代码应用平台中嵌入JS代码,也有视 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
在jsx中绑定js表达式以及jsx注释
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js学习笔记——在html中嵌入脚本
一.在html中嵌入js代码: 在html文件里嵌入js代码主要有四种形式: 第一种是通过<script></script>标记,这种一般用来定义一些函数,放在body外: 第 ...
JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
android开发rn插件,在Android原生应用中嵌入React Native
开发工具:Android Studio , WebStorm 参考链接:React Native官方中文文档一.创建React Native项目 1.在本地React Native项目目录下,创建一 ...
html中加入js,html嵌入js
python 为什么matplotlib读取的图像是4通道如何在HTML中嵌入JavaScript javaScript 方法通过onclick事件触发嵌入javaScript有两种书写方式: 内 ...

react 在JXL中嵌入JS表达式

react 在JXL中嵌入JS表达式相关推荐

最新文章

热门文章