React学习(三):JSX简介

目录
一、JSX简介二、为何使用JSX?三、JSX表达式四、JSX 特定属性五、JSX 样式六、JSX 数组

一、JSX简介

JSX 又名 JavaScript XML,JavaScript 的 XML 类语法扩展。在 js 中写一些 xml标签(html标签)。
JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。

二、为何使用JSX?

React不一定要使用JSX,为何强烈建议使用JSX。在JS中是不支持<div></div>这样的 html 标签的,因此我们在使用 React 时只能通过 React.createElement() 函数的传参来创建虚拟 DOM 元素(React 元素)。这种在原生 JS 语法限制下的 React 的运用带来了极大地不方便,不仅书写上不方便,还需要在脑海中将 html 元素一个个地拆开来分析其包含与被包含的关系。考虑到这种不方便性,React 的开发者就使用了 JSX 语法,允许用户在 js 文件中直接使用 xml 语法写明要创建的标签元素信息。
使用JSX:

ReactDOM.render(
<div>
<div>
<button id='clickme'>Click Me</button>
</div>
</div>,
document.getElementById('root')
);

不使用JSX:

ReactDOM.render(
React.createElement('div',null,
React.createElement('div',null,
React.createElement('button',{id: 'clickme'},'Click Me'))),
document.getElementById('root')
);

从上对比可以明显看出JSX代码更简单,更偏向于XML/HTML格式 ,便于开发和维护。
React遇到元素标签JSX,底层会编译为React.createElement(component, props, …children) 。

三、JSX表达式

1、JSX嵌入表达式
在 JSX 中嵌入 JavaScript 表达式。表达式写在花括号 {} 中:

ReactDOM.render(
<h1>{1+1}</h1>,
document.getElementById('root')
);

在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代:

ReactDOM.render(
<h1>{i == 1 ? 'True!' : 'False'}</h1>,
document.getElementById('root')
);

2、JSX 也是一个表达式
可以在 if 语句和 for 循环的代码块中使用 JSX表达式:

function getWelcome(isStyle) {
if (isStyle) {
return <h1>Hello, {1+1}!</h1>;
}
return <h1>Hello, world.</h1>;
}

四、JSX 特定属性

可以通过使用引号,来将属性值指定为字符串字面量:

const element = <div id="name"></div>;

也可以使用大括号,来在属性值中插入一个 JavaScript 表达式:

const element = <div src={user.name}></div>;

在属性中嵌入 JavaScript 表达式时,不要在大括号外面加上引号。你应该仅使用引号(对于字符串值)或大括号(对于表达式)中的一个,对于同一属性不能同时使用这两种符号。

五、JSX 样式

React 推荐使用内联样式,在指定元素数字后会自动添加 px:

var myStyle={
color:'blue',
fontSize:50
}
ReactDOM.render(
<div>
<h1 style={myStyle}>{"Hello, world"}</h1>
</div>,
document.getElementById('root')

六、JSX 数组

JSX 允许在模板中插入数组,数组会自动展开所有成员:

var arr = [
<h1>hello!</h1>,
<h1>world!</h1>,
];

ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
);

··················································································································································································
本文介绍JSX用法~~请大家多多指教,能get到知识点不要忘了关注点个赞~。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

React学习(三):JSX简介

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » React学习(三):JSX简介
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏