props
子組件 需要傳入兩個(gè)參數(shù)
person size
父組件使用到子組件
在組件使用中傳入 person size
包中包
utils.js 根據(jù)傳入的參數(shù) 獲取當(dāng)前地址
export function getImageUrl(person, size="s"){
return (
'http://dede/'+ person.imageId
+size+
+'.jpg'
)
}
app.js
import {getImageUrl } from './utils.js'
function Avatar({person, size}){
return (
<img
className="avatar"
src={ getImageUrl(person) }
alt={person.name}
width={size}
height={size}
/>
)
}
export default function Profile(){
return (
<div>
<Avatar
size={100}
person = {{
name: 'Saruhuashi',
imageId: 'YfeOqp2'
}} />
<Avatar
size={80}
person={{
name: 'Aklilu Lemma',
imageId: 'OKS67lh'
}}
/>
</div>
)
}
由一個(gè)值通過(guò)傳入函數(shù) 判斷當(dāng)前顯示的是否是哪個(gè)
function Item({name, isPacked}){
if(isPacked){
return <li className ="item">{name} LL</li>
}
return <li className="item">{name}</li>
}
export default function PackingList(){
return (
<section>
<h1>djeidje</h1>
<ul>
<Item
isPacked = {true}
name="dedede"
/>
<Item
isPacked = {false}
name="kkkk"
/>
</ul>
</section>
)
}
當(dāng)某個(gè)條件成立 不想render 任何東西時(shí) 可以return null
function Item({ name, isPacked }) {
if (isPacked) {
return null;
}
return <li className="item">{name}</li>;
}
也可以通過(guò)判斷isPacked 用 ？ render 顯示的文本
return (
<li className="item">
{isPacked ? name + ' ?' : name}
</li>
);
也可以通過(guò)再判斷邏輯中加入 dom標(biāo)簽
function Item({name, isPacked}){
// 內(nèi)部做邏輯判斷 顯示不同的dom
return (
<li className="item">
{isPacked ? (
<del>
{name + '?'}
</del>
): (
name
)}
</li>
)
}
export default function PackingList(){
return (
<section>
<h1>Packing list</h1>
<ul>
<Item
isPacked = {true}
name ="Space suiy"
>
</Item>
<Item
isPacked = {false}
name ="Space ujhuhu"
>
</Item>
</ul>
</section>
)
}
render arr list
import Gallery from './Gallery.js'
import { people } from './data.js';
import { getImageUrl } from './utils.js';
export default function List(){
const listItems = people.map(person=>
// 要加入key值 要不然會(huì)報(bào)錯(cuò)
<li key= {person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
>
<p>
<b>{person.name}</b>
</p>
</img>
</li>
)
return <ul>{listItems}</ul>
}
為什么一定要加人key
并且key的值最好不要是index
因?yàn)樵诒闅v對(duì)象的每個(gè)屬性進(jìn)行深度對(duì)比，非常耗性能
react使用key進(jìn)行對(duì)比府寒，如果不指定則默認(rèn)為index 下標(biāo)
index下標(biāo)不好的原因是
只會(huì)從上到下依次對(duì)比樹(shù)的不同
并沒(méi)有去找當(dāng)前項(xiàng)是否是存在項(xiàng)
而只是對(duì)比排序中的第一個(gè) 第二個(gè)
<div key="1">bob</div> | <div key="1">new-guy</div>
<div key="2">sue</div> | <div key="2">bob</div>
| <div key="3">sue</div>
不能識(shí)別，并且會(huì)非常耗費(fèi)性能去做這件事
所以找到一個(gè)唯一的key很重要
推薦id或者name能夠代表唯一的值
這樣就只需要做一個(gè)unshift操作悦陋，節(jié)省性能
