React 列表

最新推荐文章于 2024-02-02 22:58:23 发布

MW0309

最新推荐文章于 2024-02-02 22:58:23 发布

阅读量134

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_42222342/article/details/104976776

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Map遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 列表 map</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="example">

    </div>
    <script type="text/babel">
        let arr = [1, 2, 3, 4, 5];
        /*React 列表渲染 map*/
        let myDom=arr.map((item,index)=>{
            /*key 必须是独一无二的*/
            return (
                <p key={index}>{item}</p>
            )
        })
        // 必须使用map来遍历吗？
        //for in循环

        ReactDOM.render(myDom,document.getElementById("example"));
    </script>
</body>
</html>

for遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 列表 for</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
<div id="example">

</div>
<script type="text/babel">
    let arr = [1, 2, 3, 4, 5];
    function fun(){
        let newarr=[];
        for (let index in arr){
            newarr.push(<p key={index}>{arr[index]}</p>)
        }
        return newarr;
    }


    ReactDOM.render(fun(),document.getElementById("example"));
</script>
</body>
</html>

前两个效果一样
在这里插入图片描述

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的简单使用</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
<div id="example">

</div>
<script type="text/babel">
    let arr = [1, 2, 3, 4, 5];
    let index = 0;
    function fun() {
        let myDom = arr.map((v, i) => {
            return (
                <p style={{color: i == index ? 'red' : ''}} key={i}
                   onClick={()=>{index=i;console.log(i==index);render()}}>
                    {v}
                </p>
            )
        })
        return myDom
    }

    function render() {
        ReactDOM.render(fun(), document.getElementById("example"));
    }
    render()
</script>
</body>
</html>

效果图
在这里插入图片描述

MW0309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 列表

Map遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React 列表 map</title> <script src="https://cdn.staticfile.org/react/16.4.0...
复制链接

扫一扫