1 語(yǔ)法
聲明一個(gè)函數(shù)， return 一個(gè)html
其他的函數(shù)可以調(diào)用，在return內(nèi)部直接寫(xiě)入函數(shù)名一樣的標(biāo)簽 即可
function myButton(){
return (
<button>Im a button</button>
)
}
export default function myApp(){
return (
<div>
<h1>welcome to my app</h1>
<myButton />
</div>
)
}
2.添加樣式
<img className = "avatar" />
.avatar{
border-radius: 50%;
}
3.賦值
const user = {
name: 'Hedy Lamarr',
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
imageSize: 90,
};
<img className = "avatar"
src={user.imgUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
//style = {{}} 是雙括號(hào) 包裹 比較特殊 其他的暫時(shí)都是單個(gè)括號(hào)
- 渲染
可以用ifelse 做判斷
也可以用判斷運(yùn)算符簡(jiǎn)化
不需要else時(shí) 的簡(jiǎn)化寫(xiě)法
let content;
if(isLoggedIn){
content = <AdminPanel/>
}else {
content = <LoginForm/>
}
return (
<div>
{content}
</div>
)
return (
{
isLoggedIn ?(
<AdminPanel/>
) :
(<LoginForm/>
)
}
)
<div>
{isLoggedIn && <AdminPanel/>}
</div>
````
5. render list列表
````
const products = [
{ title: 'Cabbage', id: 1 },
{ title: 'Garlic', id: 2 },
{ title: 'Apple', id: 3 },
];
const listItems= products.map(product=>
<li key={product.id}>
{product.title}
</li>
)
return (
<ul>{listItems}</ul>
)
````
7.添加事件
在函數(shù)中聲明點(diǎn)擊事件夯到， return中 加入點(diǎn)擊事件
````
function functions(){
function handleClick(){
alert('click me ')
}
return (
<button onClick ={handleClick}>
click me
</button>
)
}
````
