渲染列表组件
我们使用 Javascript 中的 map()
方法来遍历 numbers
数组。将数组中的每个元素变成 <li>
标签,最后我们将得到的数组赋值给 listItems
:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
我们把整个 listItems
插入到 <ul>
元素中,然后渲染进 DOM
:
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
这段代码生成了一个 1 到 5 的项目符号列表。
基础列表组件
我们可以把前面的例子重构成一个组件,这个组件接收 numbers
数组作为参数并输出一个元素列表
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
当我们运行这段代码,将会看到一个警告 a key should be provided for list items
,意思是当你创建一个元素时,必须包括一个特殊的 key 属性。
- 让我们来给每个列表元素分配一个 key 属性来解决上面的那个警告:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
用 key 提取组件
- 元素的 key 只有放在就近的数组上下文中才有意义。
- 比方说,如果你提取出一个
ListItem
组件,你应该把key
保留在数组中的这个<ListItem />
元素上,而不是放在ListItem
组件中的<li>
元素上
- 例子:不正确的使用 key 的方式
function ListItem(props) {
const value = props.value;
return (
// 错误!你不需要在这里指定 key:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 错误!元素的 key 应该在这里指定:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
- 例子:正确的使用 key 的方式
function ListItem(props) {
// 正确!这里不需要指定 key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 正确!key 应该在数组的上下文中被指定
<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')
);