React 基础：循环列表

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

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

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'Laravel collections'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
<span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'Ruby for beginners'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
<span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'CSS is awesome'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span></code></span>

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

在 React 中创建列表永久链接

打开App.js您的应用程序声明并在上面添加一个列表。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> books <span style="color:#00e0e0">=</span> <span style="color:#fefefe">[</span>
  <span style="color:#fefefe">{</span>
    id<span style="color:#00e0e0">:</span> <span style="color:#00e0e0">1</span><span style="color:#fefefe">,</span>
    title<span style="color:#00e0e0">:</span> <span style="color:#abe338">'Laravel collections'</span><span style="color:#fefefe">,</span>
  <span style="color:#fefefe">}</span><span style="color:#fefefe">,</span>
  <span style="color:#fefefe">{</span>
    id<span style="color:#00e0e0">:</span> <span style="color:#00e0e0">2</span><span style="color:#fefefe">,</span>
    title<span style="color:#00e0e0">:</span> <span style="color:#abe338">'Ruby for beginners'</span><span style="color:#fefefe">,</span>
  <span style="color:#fefefe">}</span><span style="color:#fefefe">,</span>
  <span style="color:#fefefe">{</span>
    id<span style="color:#00e0e0">:</span> <span style="color:#00e0e0">3</span><span style="color:#fefefe">,</span>
    title<span style="color:#00e0e0">:</span> <span style="color:#abe338">'CSS is awesome'</span><span style="color:#fefefe">,</span>
  <span style="color:#fefefe">}</span><span style="color:#fefefe">,</span>
<span style="color:#fefefe">]</span><span style="color:#fefefe">;</span>

<span style="color:#00e0e0">function</span> <span style="color:gold">App</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span><span style="color:#fefefe">}</span></code></span>

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

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0"><</span>Bookshelf<span style="color:#00e0e0">></span>
	<span style="color:#fefefe">{</span>books<span style="color:#fefefe">.</span><span style="color:gold">map</span><span style="color:#fefefe">(</span><span style="color:#fefefe">(</span>book<span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">(</span>
	  <span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
	<span style="color:#fefefe">)</span><span style="color:#fefefe">)</span><span style="color:#fefefe">}</span>
<span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>Bookshelf<span style="color:#00e0e0">></span></code></span>

这一小段代码将做与我们之前相同的事情。

React 中的键永久链接

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

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

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span> key<span style="color:#00e0e0">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>id<span style="color:#fefefe">}</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span></code></span>

然而，有时我们只是没有钥匙，那我们该怎么办？

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

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> numbers <span style="color:#00e0e0">=</span> <span style="color:#fefefe">[</span><span style="color:#00e0e0">1</span><span style="color:#fefefe">,</span> <span style="color:#00e0e0">2</span><span style="color:#fefefe">,</span> <span style="color:#00e0e0">3</span><span style="color:#fefefe">]</span><span style="color:#fefefe">;</span>

<span style="color:#fefefe">{</span>numbers<span style="color:#fefefe">.</span><span style="color:gold">map</span><span style="color:#fefefe">(</span><span style="color:#fefefe">(</span>number<span style="color:#fefefe">,</span> index<span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">(</span>
	<span style="color:#00e0e0"><</span>span key<span style="color:#00e0e0">=</span><span style="color:#fefefe">{</span>index<span style="color:#fefefe">}</span><span style="color:#00e0e0">></span>Number<span style="color:#00e0e0">:</span> <span style="color:#fefefe">{</span>number<span style="color:#fefefe">}</span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>span<span style="color:#00e0e0">></span>
<span style="color:#fefefe">)</span><span style="color:#fefefe">)</span><span style="color:#fefefe">}</span></code></span>

如您所见，该索引在 map 函数上可用，可将其用作每个元素的唯一键。

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

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

感谢您阅读我的博客。随时订阅我的电子邮件通讯并连接Facebook 或者 推特