props
子组件 需要传入两个参数
person size
父组件使用到子组件
在组件使用中传入 person size
包中包
utils.js 根据传入的参数 获取当前地址
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>
)
}
由一个值通过传入函数 判断当前显示的是否是哪个
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>
)
}
当某个条件成立 不想render 任何东西时 可以return null
function Item({ name, isPacked }) {
if (isPacked) {
return null;
}
return <li className="item">{name}</li>;
}
也可以通过判断isPacked 用 ？ render 显示的文本
return (
<li className="item">
{isPacked ? name + ' ✔' : name}
</li>
);
也可以通过再判断逻辑中加入 dom标签
function Item({name, isPacked}){
// 内部做逻辑判断 显示不同的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值 要不然会报错
<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
因为在遍历对象的每个属性进行深度对比，非常耗性能
react使用key进行对比，如果不指定则默认为index 下标
index下标不好的原因是
只会从上到下依次对比树的不同
并没有去找当前项是否是存在项
而只是对比排序中的第一个 第二个
<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>
不能识别，并且会非常耗费性能去做这件事
所以找到一个唯一的key很重要
推荐id或者name能够代表唯一的值
这样就只需要做一个unshift操作，节省性能
