react学习(三)介绍JSX

2021-06-27 15:05

阅读：504

标签：出错 dom end 赋值 color size 函数返回 create cin

参考：https://facebook.github.io/react/docs/introducing-jsx.html

一、JSX介绍

ReactDOM.render(hello world
, document.getElementById(‘root‘));
红色部分如果加一层‘‘号，会出错，JSX既不是字符串也不是HTML，它是JavaScript的语法拓展

二、JSX使用

1.使用大括号嵌入js表达式

let a = "hello world";
ReactDOM.render({a}
, document.getElementById(‘root‘));

2.JSX编译之后是js对象，也就是说，可以赋值给变量，作为参数，或者函数返回值等等

let a = ‘hello world‘;
let b = {a}
ReactDOM.render(b, document.getElementById(‘root‘));

3.使用JSX为属性赋值

let a = ‘world‘;
let b = className={a}>hello
//此处应该使用驼峰命名
ReactDOM.render(b, document.getElementById(‘root‘));

4.JSX可以预防XSS攻击，因为在渲染之前，他会把内容转换为字符串

三、JSX会被编译成React.createElement()这种形式，来创建元素

react学习(三)介绍JSX

标签：出错 dom end 赋值 color size 函数返回 create cin

原文地址：http://www.cnblogs.com/sheshihao/p/7146957.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：react学习(三)介绍JSX
文章链接：http://soscw.com/index.php/essay/98474.html

亲，登录后才可以留言！