概述:
React有list集合,跟js有点类似,涉及map就需要key,key在相同的层级唯一(兄弟之间)
1.直接上例子:
function Books(){
const books=['西游记','红楼梦','三国演义','水浒传'];
const listItems = books.map((book) =>
<li>{book}</li>
);
return (
<ul>{listItems}</ul>
);
}
ReactDOM.render(
<Books />,
document.getElementById('root')
);
以上例子是用无序列表形式罗列四大名著,其实就是层层封装,首先封装<li></li>,再封装<ul></ul> 最后进行渲染,利用数组的遍历map
2.用key标注集合中的不同
function Books(){
const books=['西游记','红楼梦','三国演义','水浒传'];
const listItems = books.map((book,index) =>
//这个key可以是自己定义的唯一,实在没有采用index(元素的索引)
<li key={book.toString()}>{book}</li>
);
return (
<ul>{listItems}</ul>
);
}
ReactDOM.render(
<Books />,
document.getElementById('root')
);
3.正确使用key,就是在调用时候确定key,而不是在具体组件里面设置key
function ListItem(props) {
const value = props.value;
return (
//key不应该定义在这里,因为key不一定就是value,破坏封装特性,影响复用
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 应该定义这里
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
正确方法:
function ListItem(props) {
// 正确写法
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 正确写法
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
4.map可以嵌入到JSX中,你会发现React可以混合写html和js进行组合
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
//注意是花括号括起来的
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
总结:
List类似JavaScript的用法,只是React可以在html和javaScript灵活切换组合。更加方法用户的使用。