react版数组遍历

最新推荐文章于 2024-05-22 21:48:02 发布

原创最新推荐文章于 2024-05-22 21:48:02 发布 · 318 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

该文章展示了如何在React中利用jsx语法遍历数组，创建虚拟DOM，并将其渲染到页面指定容器中，以动态显示数组内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <!--创建容器-->
    <div id="app">

    </div>

</body>

</html>
<!-- 引入react核心 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel"> //此处一定要写babel


    //创建数组
    let arr = [
        { name: "周杰伦", music: "七里香" },
        { name: "林俊杰", music: "江南" },
        { name: "那英", music: "征服" },
        { name: "蔡徐坤", music: "情人" }
    ];

    //1.创建虚拟dom
    let vDOM = (
        <div>
            <ul>
                <li>
                    姓名: <strong>周杰伦</strong>
                    成名曲 : <strong>七里香</strong>
                </li>
                <li>
                    姓名: <strong>林俊杰</strong>
                    成名曲 : <strong>江南</strong>
                </li>
                <li>
                    姓名: <strong>那英</strong>
                    成名曲 : <strong>征服</strong>
                </li>
                <li>
                    姓名: <strong>周杰伦</strong>
                    成名曲 : <strong>七里香</strong>
                </li>
            </ul>
        </div>
    )

    //2.将创建好的虚拟dom渲染到容器
    ReactDOM.render(vDOM, document.getElementById("app"))



</script>

react升级版数组遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <!--创建容器-->
    <div id="app">

    </div>

</body>

</html>
<!-- 引入react核心 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel"> //此处一定要写babel


    //创建数组
    let arr = [
        { name: "周杰伦", music: "七里香" },
        { name: "林俊杰", music: "江南" },
        { name: "那英", music: "征服" },
        { name: "蔡徐坤", music: "情人" }
    ];

    //1.创建虚拟dom -- jsx语法
    let vDOM = (
        <div>
            <ul>
                {
                    arr.map((item, index) =>
                        <li key={index}>姓名: {item.name} --- 音乐: {item.music}</li>
                    )
                }
            </ul>
        </div>
    );

    //2.将创建好的虚拟dom渲染到容器
    ReactDOM.render(vDOM, document.getElementById("app"))



</script>