在我們寫代碼的時候膊爪,難免要為了代碼以后的維護或者調(diào)試,需要注釋掉某一段代碼嚎莉,或者一些提示信息米酬,那么JSX的注釋,是用 {/**/} 來注釋趋箩。(//雙斜杠不知道行不赃额,我沒試出來...)
PS:但是這種樣式的注釋(下面的代碼),是在div代碼塊(一個react組件)內(nèi)的注釋叫确,必須用花括號括起來跳芳,如果是在div代碼塊外的就不需要花括號了
下面的例子
ReactDOM.render(
/*這是正確的注釋*/
<div>
/*這是錯誤的注釋*/
{/*這是正確的注釋*/}
<p>1+1={1+1} {/*這是正確的注釋*/} </p>
<p> {/*1-1={1-1}*/} </p>
<p>2*2={2*2}</p>
<p>4+2={4+2}</p>
<p>5%3={5%3}</p>
</div>,
document.getElementById('demo')
);
輸出效果:
捕獲.PNG
我們寫頁面離不開css樣式,在JSX里關鍵字是JS的書寫方法比如fontSize,格式是對象的形式竹勉,并且尺寸是不需要單位的哦筛严。值的話,只要不是數(shù)字都是用字符串的處理方式加上引號或者雙引號饶米。另外注意最后的調(diào)用樣式方法,是:style={}
看個栗子:
var myStyle = {
width:300,
height:300,
fontSize:20,
paddingTop:50,
textAlign:'center',
color:'#fff',
background:'#000'
}
ReactDOM.render(
<div style={myStyle}>我是小栗子</div>,
document.getElementById('demo')
);
輸出效果:
樣式.PNG
react推薦css樣式用內(nèi)聯(lián)樣式车胡。感覺這樣修改組件檬输,比較方便吧。