二、JSX的介绍
来源:互联网 发布:淘宝鹊桥活动怎样 编辑:程序博客网 时间:2024/05/20 05:29
二、JSX的介绍
首先,请考虑下面的变量声明:
const element = <h1>hello world</h1>;
这个有趣的标签语法,因为它既不是字符串
也不是HTML
。
它被称为JSX,它是JavaScript的语法扩展。 我们建议使用它和React一起使用,以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言,但是它具有JavaScript的全部能力。
JSX用来生成React元素。 我们将在下一节中探讨将它们渲染到DOM。 下面,你可以找到JSX的基础知识。
JSX中的嵌入表达式
你可以通过将表达式包含在一个大括号里,以便用来在JSX中嵌入任何JavaScript表达式。
例如,下面代码中的 2 + 2
,user.name
,还有formatName(user)
都是可用的表达式:
function formatName(user){ return user.firstName + user.lastName;}const user = { firstName: 'yatao', lastName: 'zhang'};const Element = ( <h1> hello, {formatName(user)} </h1>);ReactDOM.render( Element, document.getElementById('root'));
我们将JSX拆分为多行以提高可读性。 虽然它不是强制性的要求,但当执行此操作时,我们还建议将其括在括号中,以避免自动分号插入而引起不必要的bug。
JSX也是一个表达式
编译后,JSX表达式会成为常规JavaScript对象。
这意味着您可以在if
语句和for
循环中使用JSX,可以将其赋值给变量或者将其作为参数,然后从函数中返回:
function getGreeting(user) { if (user) { return <h1>hello, {formatName(user)}!</h1>; } return <h1>hello, stranger.</h1>;}
使用JSX指定属性
您可以使用引号将字符串文字指定为属性:
const element = <div tabindex="0"></div>;
您还可以使用大括号在属性中嵌入JavaScript表达式:
const element = <img src={user.avatarUrl}></img>;
使用JSX指定子元素
如果标记为空,您可以使用 />
立即关闭它,例如html:
const element = <img src={user.avatarUrl} />;
JSX标签也可以包含子元素:
const element = ( <div> <h1>hello!</h1> <h2>Good to see you here.<h2> </div>);
警告
由于JSX比HTML更接近JavaScript,React DOM使用驼峰命名法约定而不是HTML属性名称。
例如,class
在JSX中变为className
,tabindex
变为tabIndex
。
JSX防止注入攻击
在JSX中嵌入用户输入是安全的:
const title = response.potentiallyMaliciousInput;// 要接收到的可能含有危险内容的字符串放入大括号中,这是比较安全的做法const element = <h1>{title}</h1>;
默认情况下,React DOM在渲染它们之前转义
嵌入在JSX中的任何值。 因此,它确保不能注入那些没有明确写在你的应用程序中的任何东西。 在渲染之前,一切都转换为字符串。 这有助于防止XSS(跨站点脚本)
攻击。
JSX表示对象
Babel将JSX编译为React.createElement()
调用。
这两个例子是相同的:
const element = ( <h1 className="greeting"> hello world </h1>);
const element = React.createElement( 'h1', {className: 'greeting'}, 'hello world');
React.createElement()
会进行一些检查,以帮助您编写无明显语法错误的代码,本质上,它创建的是一个像这样的对象:
// 提示:这是一个简单对象结构const element = { type: 'h1', props: { className: 'greeting', children: 'hello, world' }};
这些对象称为“React元素”。 你可以把它们想象成你想在屏幕上看到的样子。 React读取这些对象,并使用它们构造成为DOM元素同时一直保持其为最新的。
- 二、JSX的介绍
- 浅谈React的JSX语法(二)
- jsx解释器介绍
- Hello World以及jsx语法糖的介绍
- [React]JSX的用法
- JSX
- react与jsx语法介绍--先行篇
- 2. React JSX语法及特点介绍
- React学习(二)JSX语法
- React入门狂想曲(二)-JSX语法
- Grunt编译JSX的initConfig
- JSX 的基本语法规则
- js和jsx的区别
- JSX和组件的概念
- jsx的简单使用教程
- ReactJS 15.x - JSX是什么,JSX编译器,JSX语法转成原生的JS语法
- JSX,Html语法需注意的部分
- JSX,Html语法需注意的部分
- MVC、MVP、MVVM使用关系总结
- 解决String类型存入Oracle数据库中对应的TIMESTAMP类型
- 同一服务器下配置多域名,去掉Tomcat端口号,Nginx反向代理做转发
- Android中如何隐藏掉顶部通知栏
- list和set集合的几种遍历方式
- 二、JSX的介绍
- Objective-c新特性
- 使用Spring的XML声明式事务管理
- hibernate中的JPA
- Android Studio 打包只有app-release-unaligned.apk没有app-release.apk
- 三、渲染元素
- Android如何使用XML创建一个环形渐变颜色图片
- <NOIP> 15 . P1428 小鱼比可爱
- ActionBar标题居中