React入门-2.JSX介绍
介绍
如下代码,看上去比较搞笑,既像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的组件
相关推荐
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04