分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

React——JSX

发布时间:2023-09-06 01:11责任编辑:熊小新关键词:React

一.将表达式嵌套在JSX中

要在JSX中内嵌js表达式只需要将js表达式放在{}中,例如:
???

const element = <h1>this is a JSX {sayName()}</h1>function sayName(){};

二.JSX也是表达式

在编译之后Jsx会成为一个常规的js对象。所以可以在if,for语句中使用Jsx,例如
???

function getName(firstname,lastname,all=false){if(all){return <p>{firstname} {lastname} </p>}}


???注:使用jsx时,标签之间的内容会被当作字符串({}中的会被当作js语句),如
??????

<p>{name1} + ‘ ‘ + {name2}</p>const name1 = ‘li‘;const name2 = ‘hua‘;会被渲染为li+‘ ‘+hua

 三.使用JSX给元素添加属性

// 第一种方式const element = <p title="page">this is page</p>// 第二种方式 const element = <p title={title}>this is page,too</p> const title = ‘page‘;// 注:JSX中的元素的属性使用驼峰命名法(class对应className)

四.JSX标签也能够包含子标签

const element = ( ???????<div> ???????????<h1>I am a header</h1> ???????????<p> I am a page</p> ???????</div> );

React——JSX

原文地址:http://www.cnblogs.com/QxQstar/p/7529951.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved