リストとキー
リストとキー
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
複数のコンポーネントをレンダリングする
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{
number}</li>
);
ReactDOM.render(
<ul>{
listItems}</ul>,
document.getElementById('root')
);
基本リストコンポーネント
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')
);
キー
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={
number.toString()}>
{
number}
</li>
);
キーを使用してコンポーネントを抽出します
// An highlighted block
var foo = 'bar';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>
);
}
経験則として、map（）メソッドの要素はkey属性を設定する必要があります。
キーは兄弟ノード間で一意である必要があります
map（）をJSXに埋め込む
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={
number.toString()}
value={
number} />
);
return (
<ul>
{
listItems}
</ul>
);
}