React中数组的渲染
渲染多个元素
本文将帮助您了解如何在JSX中渲染数组，以及在组件中渲染多个元素时的最佳实践。现代 JavaScript 库的主要优势之一是它可以使用循环自动生成 HTML，例如……如果我们想要渲染多个相同类型的元素，只需遍历数组或对象即可，而无需编写代码块。
渲染多个元素
在 React 中，要返回多个元素，我们可以使用map()方法遍历数组并返回单个元素。
export default function App() {
const animalList=['Lion','Tiger','Elephant','Giraffe'];
return (
<div className="App">
<h1>Render Arrays in React</h1>
{
animalList.map((animal)=>{
return (<p>{animal}</p>)
})
}
</div>
);
}
在上面的代码片段中，我创建了一个字符串数组，并使用map()方法遍历每个元素，这样就为每个元素返回了一个 HTML 代码。当您想要为数组中的每个元素显示一个单独的 HTML 代码时，可以使用此方法。
以上代码片段的输出结果。
但是，如果您查看控制台，您会看到一条警告，指出数组或迭代器中的每个子元素都应该有一个唯一的键。
出现此警告是因为您尝试在组件内部渲染一个没有键的集合。渲染单个组件必须使用键。
可以通过为每个元素使用唯一的键来解决此问题。
export default function App() {
const animalList=['Lion','Tiger','Elephant','Giraffe'];
return (
<div className="App" style={{backgroundColor:"#ececec"}}>
<h1>Render Arrays in React</h1>
{
animalList.map((animal,index)=>{
return <p key={index}>{animal}</p>
})
}
</div>
);
}
渲染相邻元素
在JSX中，要渲染多个项目，必须用一个包装器将它们包裹起来。
如果在 jsx 中使用循环返回多个项目会发生什么？
export default function App() {
const animalList=['Lion','Tiger','Elephant','Giraffe'];
return (
<li>Lion</li>
<li>Tiger</li>
<li>Elephant</li>
<li>Giraffe</li>
);
}
这会抛出一个错误🤯
为此，您需要使用 div 或 ol 元素包裹该代码块，如下面的代码片段所示。
export default function App() {
return (
<ol>
<li>Lion</li>
<li>Tiger</li>
<li>Elephant</li>
<li>Giraffee</li>
</ol>
);
}
使用 React.fragment 渲染相邻元素
将元素包裹在 div 中会导致应用程序充斥着 div，这通常被称为“div 汤”。为了解决这个问题，React 发布了一种名为Fragments 的新组件。
export default function App() {
return (
<React.Fragment>
<li>Lion</li>
<li>Tiger</li>
<li>Elephant</li>
<li>Giraffee</li>
</React.Fragment>
);
}
片段也可以像空标签一样使用简短的语法，
export default function App() {
return (
<>
<li>Lion</li>
<li>Tiger</li>
<li>Elephant</li>
<li>Giraffee</li>
</>
);
}
点击此处了解更多关于 Fragment 的信息：React Fragment
文章来源：https://dev.to/ajithmadhan11/rendering-arrays-in-react-14bh