您的当前位置:首页正文

React组件循环

2024-11-10 来源:个人技术集锦

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>
Top