使用React缩擂，不一定非要使用JSX語法鼠冕，可以使用原生的JS進行開發(fā)。但是JSX在定義類似HTML這種樹形結構時胯盯，十分的簡單明了懈费。簡明的代碼結構更利于開發(fā)和維護。
從本質上講博脑，JSX 只是為 React.createElement(component, props, ...children) 函數(shù)提供的語法糖憎乙。
- jsx代碼
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
- 編譯為
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
這很像vue里面的render函數(shù)
- 如果不存在子節(jié)點，你可以使用自閉合（self-closing）格式的標簽叉趣。例如:
<div className="sidebar" />
- 編譯為：
React.createElement(
'div',
{className: 'sidebar'},
null
)
- jsx代碼
React.render(
<div>
<div>
<div>content</div>
</div>
</div>,
document.getElementById('example')
);
- 編譯為
React.render(
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null, 'content')
)
),
document.getElementById('example')
);
HTML屬性
注意：標簽的屬性class和for泞边，需要寫成className和htmlFor。因為兩個屬性是JavaScript的保留字和關鍵字疗杉。無論你是否使用JSX阵谚。
#使用JSX
React.render(
<label className="xxx" htmlFor="input">content</label>,
document.getElementById('example')
);
#不使用JSX
React.render(
React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
document.getElementById('example')
);
轉化
-
JS表達式
表達式用{}包起來，不要加引號乡数，加引號就會被當成字符串椭蹄。
JSX是HTML和JavaScript混寫的語法闻牡，當遇到<净赴，JSX就當HTML解析，遇到{就當JavaScript解析罩润。
-
解析變量
var str="hello"
React.render(
<div>{str}</div>,
document.body
);
//甚至
var arr=[1,2,3,4]
React.render(
<ul>
{arr.map(function(item){
return <li>{item}</li>
})}
</ul>,
document.body
);
-
屬性表達式
React.render(
<div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
document.body
);
-
子表達式
var Nav = React.createClass({
render: function () {
return <div>nav</div>
}
});
React.render(
<div>
{2 > 1 ? <Nav/> : <div>div</div>}
</div>,
document.body
);
特別注意
-
style屬性
在React中寫行內(nèi)樣式時玖翅，要這樣寫，不能采用引號的書寫方式
React.render(
<div style={{color:'red'}}>
xxxxx
</div>,
document.body
);
-
HTML轉義
比如我們有一些內(nèi)容是用戶輸入的富文本割以，從后臺取到數(shù)據(jù)后展示在頁面上金度，希望展示相應的樣式
var content='<strong>content</strong>';
React.render(
<div>{content}</div>,
document.body
);
結果頁面直接輸出內(nèi)容了：
A.png
React默認會進行HTML的轉義，避免XSS攻擊严沥，如果要不轉義猜极，可以這么寫：
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);
-
自定義HTML屬性
如果在編寫React過程中使用了自定義屬性，React不會渲染的
React.render(
<div dd='xxx'>content</div>,
document.body
);
B.png
要想使用得這么寫：
React.render(
<div data-dd='xxx' aria-dd='xxx'>content</div>,
document.body
);
jsx基本使用先到這里消玄，希望可以幫到同學們
