1.XML基本語法
使用類似于XML語法的基本好處是可以任意嵌套,可以很清楚的看到DOM樹狀結構及其屬性
const List=()=>(
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
)
注意點是:
只允許被一個標簽包裹住
標簽一定要閉合
2.元素類型:
JSX中HTML標簽的小寫字母對應DOM元素浸卦,但是組件元素要對應大寫字母
組件的命名要以大寫字母為主
注釋
注釋的方法是{/* 節(jié)點注釋 */}
const App = (
<Nav>
{/* 節(jié)點注釋*/}
<Person
/* 多行 注釋*/
name={window.isLoggedIn ? window.name : ''} />
</Nav>);
);
3.元素屬性
JSX不同于DOM元素屬性的是**class和for**胡野,所以轉換如下:
-class屬性改為className
-for屬性改為htmlFor
所以example如下:
const Header=({title,children})=>(
<h3 title={title}>{children}</h3>
)
調用的時候為
<Header title="hello world">Hello world</Header>
展開屬性
const component=<Component name={name} value={value}/>
4.js屬性表達式
屬性值 必須使用表達式州刽,用{}來替換
const App = ( <Nav>
{/* 節(jié)點注釋*/}
<Person /* 多行 注釋*/
name={window.isLoggedIn ? window.name : ''} />
</Nav>);