React系列之JSX
JSX是一个有趣的东西。它看似像一个模板语言,但是又具备javascript的所有能力。
在React中,JSX用来生成React元素。
我们使用create-react-app创建一个APP后:
一段JSX代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="App">
我是一个APP
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
我们可以在JSX中内嵌表达式
//插入数据
const data = {name:"小明"}
const ele = <div>我的名字是:{data.name} </div>;
//计算
const ele1 = <div> {1+1} </div>;
//三元表达式
const ele2 = <div> {true?"我是小明":"我不是小明"} </div>;
//在属性里
const ele3 = <img src={date.xxx} />;
因为JSX使用Babel编译后,本身自己就是一个对象.
let ele = <div className="user">Hello World!</div>
编译后:
const element = React.createElement(
'div',
{className: 'user'},
'Hello World!'
);
所以,这就是JSX可以与js代码混写的原因.
var a =1;
function switchView(){
if(a>1){
return <div className="user">Hello World!</div>
}else{
return <div className="user">Hello Ming!</div>
}
}
编译后:
var a =1;
function switchView(){
if(a>1){
return React.createElement('div',{className: 'user'},'Hello world!');
}else{
return React.createElement('div',{className: 'user'},'Hello Ming!');
}
}
防止XXS攻击
let content ="<span>我是HTML代码?</span>"
let ele = <div>{content}</div>
//会直接输入<span>我是HTML代码?</span>,不会把这一段变成HTML
元素的class
因为在ES6里,class是关键字(不再是保留字).所以写的时候要注意,修改为className.
另外属性名都建议使用驼峰命名法.
//HTML
<div class="user">Hello World!</div>
//JSX
<div className="user">Hello World!</div>
微信公众号
