【React基础】列表渲染

最新推荐文章于 2021-02-11 07:52:30 发布

Milk595

最新推荐文章于 2021-02-11 07:52:30 发布

阅读量252

点赞数

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

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107781325

版权

React 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.react列表渲染 map()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/babel-standalone/babel.min.js"></script>
  <style>
    .demostyle{
      color: red;
    }
  </style>
</head>
<body>
      
     <div id="reactDom"></div>
     <script type="text/babel"> 
            // react列表渲染 map()
            let arr = ["吃饭","睡觉","打豆豆"]
            let myDom = arr.map((item,index) => {
               // key 必须是独一无二的
              //  return <p>{item}</p>

              //  return <p key={index}>{item}</p>

              //  return 
              //  <p key={index}>{item}</p>

               return (<p key={index}>{item}</p>)


            })

            ReactDOM.render(myDom,document.getElementById('reactDom'))
     </script>

</body>
</html>

不加key:

return <p>{item}</p>

在这里插入图片描述

换行元素不出来：

       return 
       <p key={index}>{item}</p>

在这里插入图片描述
需要换行时：()括号包裹

return (<p key={index}>{item}</p>)

在这里插入图片描述

2.react渲染列表for in 循环

<body>
      
     <div id="reactDom"></div>
     <script type="text/babel"> 
            // react列表渲染 map()
            let arr = ["吃饭","睡觉","打豆豆"]
            //必须使用map来遍历吗？
            // for in 循环
            function fun() {
              let newarr = []
              for(let index in arr) {
                newarr.push(<p key={index}>{arr[index]}</p>)
              }
              return newarr;
            }

            ReactDOM.render(fun(),document.getElementById('reactDom'))
     </script>

</body>

在这里插入图片描述

3.综合运用，点击变色

<body>
      
     <div id="reactDom"></div>
     <script type="text/babel"> 
            let arr = ["吃饭","睡觉","打豆豆"];
            let index = 0;
            
            function fun() {
              let myDom = arr.map((v,i) => {
                return <p style={{color:i==index?'red':''}} key={i} onClick={() => {index=i;render()}}>{v}</p>
              })
              return myDom
            }

            function render() {
               ReactDOM.render(fun(),document.getElementById('reactDom'))
            }

            render()

     </script>

</body>

在这里插入图片描述

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React基础】列表渲染

1.react列表渲染 map()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/r
复制链接

扫一扫

专栏目录