React组件循环

最新推荐文章于 2024-03-06 14:25:10 发布

SCENARIO24

最新推荐文章于 2024-03-06 14:25:10 发布

阅读量803

点赞数 2

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

本文链接：https://blog.csdn.net/LeonArdo_Netsr/article/details/119111202

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
      var arr = ['a','b','c','d'];
      var str = [];
      for(var i=0;i<arr.length;i++){
        str.push(<li key={i}>{arr[i]}</li>)
      };
      ReactDOM.render(
        <ul>
          {str}
        </ul>,
        document.getElementById("my")
      );
    </script>
</head>
<body>
<div id="my"></div>
</body>
</html>

map循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        var arr = ['a','b','c','d'];
        var str = arr.map((item,index)=>{
            return <div key={index}>{index}--{item}</div>
        });
        ReactDOM.render(
            <div>{str} </div>,
            document.getElementById("my")
        );
    </script>
</head>
<body>
<div id="my"></div>
</body>
</html>

SCENARIO24

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React组件循环

for循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></s
复制链接

扫一扫