JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值

最新推荐文章于 2024-06-04 10:21:50 发布

viceen

最新推荐文章于 2024-06-04 10:21:50 发布

阅读量917

点赞数

分类专栏： react知识文章标签： js html reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/111939949

版权

react知识专栏收录该内容

54 篇文章 1 订阅

订阅专栏

JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值

JSX可以赋值给变量
作为函数的参数
作为函数的返回值

function showInfo (info) {
  // return info;
  return (
    <div>
      <div>测试JSX返回值</div>
      {info}
    </div>
  )
}
let element = showInfo(<div>JSX表达式</div>)

文件结构

在这里插入图片描述

公共html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相关js库文件 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：页面中需要提供一个容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基于React实现前端功能 -->
  <script type="text/babel" src="./js/03-JSX作为表达式用法.js"></script>
</body>

</html>

在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面

实例一：JSX元素本身就是表达式

js文件

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
let element = <div>表达式</div>
ReactDOM.render(element, document.getElementById('root'))

显示1

在这里插入图片描述

实例二：JSX元素可以作为函数的参数

js文件

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = <div>表达式</div>

// 2、JSX元素可以作为函数的参数
function showInfo (param) {
  return param
}
let element = showInfo(<div><div>你好</div><div>hello</div></div>)
ReactDOM.render(element, document.getElementById('root'))

显示2.1

在这里插入图片描述

变形

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = <div>表达式</div>

// 2、JSX元素可以作为函数的参数
function showInfo (param) {
  return param
}
let info = (
  <div>
     <div>TOM</div>
    <div>JERRY</div>
   </div>
 )
//let element = showInfo(<div><div>你好</div><div>hello</div></div>)
let element = showInfo(info)

ReactDOM.render(element, document.getElementById('root'))

显示2.2

在这里插入图片描述

实例三：JSX元素可以作为函数的返回值

js文件

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = <div>表达式</div>

// 2、JSX元素可以作为函数的参数
// function showInfo (param) {
//   return param
// }
// let info = (
//   <div>
//     <div>TOM</div>
//     <div>JERRY</div>
//   </div>
// )
// let element = showInfo(<div><div>你好</div><div>hello</div></div>)
// let element = showInfo(info)

// 3、JSX元素可以作为函数的返回值
function showMsg (age) {
  return (
    <div>
      <div>用户名</div>
      <div>密码</div>
      {age}
    </div>
  )
}
let element = showMsg(<div>年龄</div>)

ReactDOM.render(element, document.getElementById('root'))

显示3

在这里插入图片描述

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值

JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值JSX可以赋值给变量作为函数的参数作为函数的返回值function showInfo (info) { // return info; return ( <div> <div>测试JSX返回值</div> {info} </div> )}let element
复制链接

扫一扫

专栏目录