了解JSX

最新推荐文章于 2024-08-01 11:31:17 发布

小小程序员.¥

最新推荐文章于 2024-08-01 11:31:17 发布

阅读量545

点赞数 8

分类专栏： React 文章标签：前端 react

本文链接：https://blog.csdn.net/m0_59745705/article/details/134636421

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在React中使用JSX

<!DOCTYPE html>

<html>

<head>

</head>

<body>

JSX

<!-- JSX

概念：JSX是JavaScript和XML的缩写，表示在js代码中编写HTML

模板结构，它是React中编写UI模板的方式

优势：HTML的声明模板写法，JS的可编程能力

本质：JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具左解析之后才能在浏览器中运行

-->

JSX中使用JS表达式

<!--JSX中使用JS表达式

在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量，函数调用，方法调用等等

1.使用引号传递字符串

2.使用JavaScript变量

3.函数调用和方法调用

4.使用JavaScript对象

-->

<!--

const count =100

function getname(){

return 'jack'

}

function App() {

// return里面就是JSX

return (

this is app

{/* 字符串 */}

{'this is message'}

{/* JavaScript变量 */}

{count}

{/* 函数调用 */}

{getname()}

{/* 方法调用 */}

{new Date().getDate()}

{/* JS对象 */}

{/* 外层{}是识别表达式的语法，内层{}是识别对象结构 */}

{/* 注意：只有表达式可以识别，if语句，switch语句，声明变量属于语句，不是表达式，不能出现在{}中*/}

-->

渲染列表

<!-- 渲染列表

const list = [

{ id: 1001, name: 'Vue' },

{ id: 1002, name: 'React' },

{ id: 1003, name: 'Angular' }

]

{/* 渲染列表 */}

{/* map 循环哪个结构 return结构 */}

{/* 注意事项：加上一个独一无二的key 字符串或者number id */}

{/* key的作用：React框架内部使用提升更新性能的 */}

<ul>

{list.map(item => <li key ={item.id} >{item.name}</li>)}

</ul>

</div>

-->

JSX中实现条件渲染

<!--

const isLogin = true

function App () {

return (

{/* 逻辑与 && */}

{isLogin && <span>this is span</span>}

{/* 三元运算 */}

{isLogin ? <span>jack</span> : <span>loading...</span>}

</div>

)

}

-->

复杂条件渲染

<!--

// 定义文章类型

const articleType = 3 // 0 1 3

// 定义核心函数（根据文章类型返回不同的JSX模版）

function getArticleTem () {

if (articleType === 0) {

return <div>我是无图文章</div>

} else if (articleType === 1) {

return <div>我是单图模式</div>

} else {

return <div>我是三图模式</div>

}

function App () {

return (

{/* 调用函数渲染不同的模版 */}

{getArticleTem()}

</div>

)

}

-->

React基础事件绑定

<!-- 基础语法：on+事件名称 = {事件处理程序}，整体上遵循驼峰命名法

使用事件对象参数，语法：在事件回调函数中设置形参e

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

// 基础绑定

// const handleClick = () => {

// console.log('button被点击了')

// }

return (

<button onClick={handleClick}>click me </button>

</div>

// 事件参数e

// const handleClick = (e) => {

// console.log('button被点击了', e)

// }

return (

<button onClick={handleClick}>click me </button>

</div>

// 传递自定义参数

// const handleClick = (name) => {

// console.log('button被点击了', name)

// }

return (

<button onClick={() => handleClick('jack')}>click me </button>

</div>

// 既要传递自定义参数而且还要事件对象e

const handleClick = (name, e) => {

console.log('button被点击了', name, e)

}

return (

<button onClick={(e) => handleClick('jack', e)}>click me </button>

</div>

)

}

-->

</body>

</html>

小小程序员.¥

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
了解JSX

{/* 注意：只有表达式可以识别，if语句，switch语句，声明变量属于语句，不是表达式，不能出现在{}中*/}本质：JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具左解析之后才能在浏览器中运行。:)实现基础的条件渲染 -->在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量，函数调用，方法调用等等。{/* key的作用：React框架内部使用提升更新性能的 */}{/* 外层{}是识别表达式的语法，内层{}是识别对象结构 */}
复制链接

扫一扫