ReactJS |列表-yiteyi-C++库

在开发任何网站的用户界面时，列表都非常有用。列表主要用于显示网站中的菜单，例如导航栏菜单。在常规JavaScript中，我们可以使用阵列用于创建列表。我们可以像在常规JavaScript中一样，在React中创建列表。我们将在本文中进一步详细了解如何做到这一点。让我们首先看看如何遍历和更新常规JavaScript中的任何列表。我们可以使用地图（）在JavaScript中用于遍历列表的函数。

null

下面的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'                                        )                         
                           );                         

上述代码将呈现一个无序列表，如下输出所示：

图片[1]-ReactJS |列表-yiteyi-C++库

渲染组件内部的列表

在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'                                        )                         
                           );                         

输出：

图片[2]-ReactJS |列表-yiteyi-C++库

在上面的输出中可以看到，无序列表已成功呈现到浏览器中，但控制台中会记录一条警告消息。

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中使用键来标识列表中的哪些项已更改、更新或删除。换句话说，我们可以说键是用来给列表中的元素赋予身份的。我们将在下一篇文章中更详细地了解密钥。

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript