ReactJS |列表

在开发任何网站的用户界面时,列表都非常有用。列表主要用于显示网站中的菜单,例如导航栏菜单。在常规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
    喜欢就支持一下吧
    点赞15 分享