最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门-2.JSX介绍

XAMPP下载 admin 727浏览 0评论
 介绍
如下代码,看上去比较搞笑,既像Javascript的语法,又像HTML,将一个标签赋值给变量element。这就是JSX,是javascript的扩展语法。我们推荐在react中使用JSX,使用JSX描述UI。

const element = <h1>Hello, world!</h1>;
JSX中嵌入表达式
在JSX中,可以在大括号里嵌入表达式,与vue中的双大括号作用类似

<div id=”app”></div>
<script type=’text/babel’>
let name = ‘terry’;
let p = {name:’larry’,age:12}
let dom = <h1>hello {name},{1+1},{p.age},{p?’欢迎’:’…’}</h1>
ReactDOM.render(
dom,document.getElementById(‘app’)
);
</script>
在JSX中指定属性
指定静态属性值

const element = <div tabIndex=”0″></div>;
在大括号中指定动态属性值

const user = {avatarUrl:’images/a.jpg’};
const element = <img src={user.avatarUrl}></img>;
JSX结构
单标签,如果没有结束标签在开始标签的中加闭合

const element = <img src={user.avatarUrl} />;
jsx可以存在子标签

const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX可以防止注入攻击
默认情况下,React DOM在呈现它们之前转义JSX中嵌入的任何值。在呈现前,所有内容被转换为字符串。

//假设name的值从其他地方获取,动态dom
let name =<h2>terry</h2>;
let dom = <div> {name}</div>
ReactDOM.render(
dom,
document.getElementById(‘app’)
);
浏览器将会显示 [object Object]

JSX本质
JSX实际上会被编译为一个JS对象

const element = (
<h1 className=”greeting”>
Hello, world!
</h1>
);
等价于

const element = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);
我们把这种对象成为“React elements”.React读取这些对象并且使用这些对象构造DOM,保持更新

到此,我们了解了JSX基本语法。接下来,我们学习react的组件

转载请注明:XAMPP中文组官网 » React入门-2.JSX介绍

您必须 登录 才能发表评论!