首页 > 代码库 > react学习(三)介绍JSX
react学习(三)介绍JSX
参考:https://facebook.github.io/react/docs/introducing-jsx.html
一、JSX介绍
ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
红色部分如果加一层‘‘号,会出错,JSX既不是字符串也不是HTML,它是JavaScript的语法拓展
二、JSX使用
1.使用大括号嵌入js表达式
let a = "hello world";
ReactDOM.render(<div>{a}</div>, document.getElementById(‘root‘));
2.JSX编译之后是js对象,也就是说,可以赋值给变量,作为参数,或者函数返回值等等
let a = ‘hello world‘;
let b = <div>{a}</div>
ReactDOM.render(b, document.getElementById(‘root‘));
3.使用JSX为属性赋值
let a = ‘world‘; let b = <div className={a}>hello</div>//此处应该使用驼峰命名 ReactDOM.render(b, document.getElementById(‘root‘));
4.JSX可以预防XSS攻击,因为在渲染之前,他会把内容转换为字符串
三、JSX会被编译成React.createElement()这种形式,来创建元素
react学习(三)介绍JSX
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。