React 基础：循环列表

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

在今天的 React 基础文章中，我们将增强我们的 第一个 React 组件 带有列表。

昨天我们制作了一些静态书籍组件，如下所示：

<Book title=‘Laravel collections’ />
<Book title=‘Ruby for beginners’ />
<Book title=‘CSS is awesome’ />

然而，这很快就变成了维持的斗争。那么让我们看看如何从列表中动态加载这些书籍。

在 React 中创建列表永久链接
打开App.js您的应用程序声明并在上面添加一个列表。

const books = [
{
id: 1,
title: ‘Laravel collections’,
},
{
id: 2,
title: ‘Ruby for beginners’,
},
{
id: 3,
title: ‘CSS is awesome’,
},
];

function App() {}
为了在我们的 React 应用程序中呈现这些元素，我们可以利用该map函数。

<Bookshelf>
{books.map((book) => (
<Book title={book.title} />
))}
</Bookshelf>
这一小段代码将做与我们之前相同的事情。

React 中的键永久链接
然而，我在上面的例子中犯了一个大错误。当我们像上面那样在 React 中渲染列表项时，我们应该始终设置一个 key 属性。这个键将帮助 React 确定哪些项目更改或应该删除。

要添加密钥，我们可以使用以下代码。

<Book title={book.title} key={book.id} />
然而，有时我们只是没有钥匙，那我们该怎么办？

好吧，不用担心，React 带有一个我们可以用作键的内置索引。

const numbers = [1, 2, 3];

{numbers.map((number, index) => (
<span key={index}>Number: {number}</span>
))}
如您所见，该索引在 map 函数上可用，可将其用作每个元素的唯一键。

像往常一样，您可以在 GitHub. 我希望你喜欢这篇关于 React 循环的文章。

感谢您的阅读，让我们联系！永久链接

​