在开发任何网站的用户界面时,列表都非常有用。列表主要用于显示网站中的菜单,例如导航栏菜单。在常规JavaScript中,我们可以使用 阵列 用于创建列表。我们可以像在常规JavaScript中一样,在React中创建列表。我们将在本文中进一步详细了解如何做到这一点。 让我们首先看看如何遍历和更新常规JavaScript中的任何列表。我们可以使用 地图() 在JavaScript中用于遍历列表的函数。
下面的JavaScript代码演示了如何使用map()函数遍历列表:
Javascript
<script type= "text/javascript" > var numbers = [1,2,3,4,5]; const updatedNums = numbers.map((number)=>{ return (number + 2); }); console.log(updatedNums); </script> |
上述代码将以下输出记录到控制台:
[3, 4, 5, 6, 7]
现在让我们在React中创建一个元素列表。我们将呈现列表 数字 在上面的代码中,将其作为浏览器中的无序列表元素,而不是简单地登录到控制台。为此,我们将使用JavaScript map()函数遍历列表,并更新要包含在
元素之间的元素。最后,我们将把这个新列表包装在
元素中,并将其呈现给DOM。
下面的代码说明了这一点:
Javascript
import React from 'react' ; import ReactDOM from 'react-dom' ; const numbers = [1,2,3,4,5]; const updatedNums = numbers.map((number)=>{ return <li>{number}</li>; }); ReactDOM.render( <ul> {updatedNums} </ul>, document.getElementById( 'root' ) ); |
上述代码将呈现一个无序列表,如下输出所示:
渲染组件内部的列表
在React中的上述代码中,我们直接将列表呈现给DOM。但通常情况下,在React中呈现列表并不是一个好的做法。我们已经讨论了组件的用法,并且已经看到React中的所有内容都是作为单个组件构建的。考虑导航菜单的例子。很明显,在任何网站中,导航菜单中的项目都不是硬编码的。此项从数据库中提取,然后在浏览器中显示为列表。因此,从组件的角度来看,我们可以说,我们将使用道具将列表传递给组件,然后使用该组件将列表呈现给DOM。我们可以更新上面的代码,其中我们直接将列表呈现为一个组件,该组件将接受一个数组作为道具,并返回一个无序列表。
Javascript
import React from 'react' ; import ReactDOM from 'react-dom' ; // Component that will return an // unordered list function Navmenu(props) { const list = props.menuitems; const updatedList = list.map((listItems)=>{ return <li>{listItems}</li>; }); return ( <ul>{updatedList}</ul> ); } const menuItems = [1,2,3,4,5]; ReactDOM.render( <Navmenu menuitems = {menuItems} />, document.getElementById( 'root' ) ); |
输出:
在上面的输出中可以看到,无序列表已成功呈现到浏览器中,但控制台中会记录一条警告消息。
Warning: Each child in an array or iterator should have a unique "key" prop
上面的警告信息表示,无序列表中的每个列表项都应该有一个唯一的键。“键”是在React中创建元素列表时需要包含的特殊字符串属性。我们将在以后的文章中详细讨论密钥。现在,让我们为上面代码中的每个列表项分配一个字符串键。
以下是带密钥的更新代码:
Javascript
import React from 'react' ; import ReactDOM from 'react-dom' ; // Component that will return an // unordered list function Navmenu(props) { const list = props.menuitems; const updatedList = list.map((listItems)=>{ return ( <li key={listItems.toString()}> {listItems} </li> ); }); return ( <ul>{updatedList}</ul> ); } const menuItems = [1,2,3,4,5]; ReactDOM.render( <Navmenu menuitems = {menuItems} />, document.getElementById( 'root' ) ); |
此代码将提供与前一代码相同的输出,但这次没有任何警告。React中使用键来标识列表中的哪些项已更改、更新或删除。换句话说,我们可以说键是用来给列表中的元素赋予身份的。我们将在下一篇文章中更详细地了解密钥。