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

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

  • JSX可以赋值给变量
  • 作为函数的参数
  • 作为函数的返回值
function showInfo (info) {
     
  // return info;
  return (
    <div>
      <div>测试JSX返回值</div>
      {
     info}
    </div>
  )
}
let element = showInfo(<div>JSX表达式</div>)

文件结构

JSX表达式用法(二)——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值_第1张图片

公共html文件


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  
  <script type="text/javascript" src="./lib/react.development.js">script>
  <script type="text/javascript" src="./lib/react-dom.development.js">script>
  
  <script type="text/javascript" src="./lib/babel.min.js">script>
head>

<body>
  
  <div id="root">div>
  
  <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表达式用法(二)——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值_第2张图片

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

js文件

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = 
表达式
// 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表达式用法(二)——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值_第3张图片

变形

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = 
表达式
// 2、JSX元素可以作为函数的参数 function showInfo (param) { return param } let info = ( <div> <div>TOM</div> <div>JERRY</div> </div> ) //let element = showInfo(
你好
hello
)
let element = showInfo(info) ReactDOM.render(element, document.getElementById('root'))

显示2.2

JSX表达式用法(二)——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值_第4张图片

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

js文件

/*
  JSX作为表达式用法

  1、JSX元素本身就是表达式
  2、JSX元素可以作为函数的参数
  3、JSX元素可以作为函数的返回值
*/
// 1、JSX元素本身就是表达式
// let element = 
表达式
// 2、JSX元素可以作为函数的参数 // function showInfo (param) { // return param // } // let info = ( //
//
TOM
//
JERRY
//
// ) // let element = showInfo(
你好
hello
)
// 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

JSX表达式用法(二)——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值_第5张图片

你可能感兴趣的:(react知识,js,html,reactjs)