我們可以生成一個(gè)包含多個(gè)標(biāo)簽的JSX元素：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
通過(guò)以下代理來(lái)引用：
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
會(huì)輸出以下結(jié)果：
運(yùn)行結(jié)果
我們可以將上述邏輯封閉成一個(gè)組件涂屁，通過(guò)組件的props來(lái)控制<li>的數(shù)量 ：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
); // 根據(jù) propes.numbers來(lái)生成
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
keys
上例中，當(dāng)我們使用map的時(shí)候井仰，在同一個(gè)結(jié)點(diǎn)下會(huì)產(chǎn)生多個(gè)相同標(biāo)簽元素恶守。此時(shí)React會(huì)產(chǎn)生警告第献，為了取消這個(gè)警告，我們給每一個(gè)標(biāo)簽添加key來(lái)解決兔港。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}> // 添加key屬性
{number}
</li>
);
最后map也可以嵌入到JSX表達(dá)式中調(diào)用：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
React中如何處理表單庸毫？
好，這一節(jié)就到這里押框。后續(xù)我將介紹更多React技術(shù)細(xì)節(jié)岔绸，來(lái)慢慢解答上述問(wèn)題。
想學(xué)計(jì)算機(jī)技術(shù)嗎橡伞？需要1對(duì)1專(zhuān)業(yè)級(jí)導(dǎo)師指導(dǎo)嗎盒揉？想要團(tuán)隊(duì)陪你一起進(jìn)步嗎?歡迎加我為好友！微信號(hào)：iTekka兑徘。
