react下的九九乘法表

最新推荐文章于 2022-01-01 17:14:51 发布

菜兔子成长记

最新推荐文章于 2022-01-01 17:14:51 发布

阅读量971

点赞数 3

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/SASAEDFDASF/article/details/121694469

版权

for循环

<!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="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>

    <div id="app"></div>
    <script type="text/babel">
    class Table extends React.Component{
      constructor(props){
        super(props)
        this.state={
          num:9
        }
      }
      render(){
          const arr=[]
          for(let i=1;i<=this.state.num;i++)
          {  const item=[]
            for(let j=1;j<=i;j++){
             item.push(<td key={j}>{i}*{j}={i*j} &nbsp;</td>)
          }
          arr.push(<tr>{item}</tr>)
      }
        return <div>{arr}</div>
      }

    }



    ReactDOM.render(
      <Table/>,
      document.getElementById('app')
    )
    </script>
</body>
</html>

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="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>
    <style>
      span{
        margin-right: 20px;
      }

    </style>
<body>

  <div id="app">

  </div>
  <script type="text/babel">
  function Table (props){
    const list=props.number
   return <table>{list.map((n)=>{
      return <tr>{list.map((m)=>{
          return n<m? null:<td>{n}*{m}={m*n}<span></span></td>
      })}</tr>
    })}</table>
  }
  const num=[1,2,3,4,5,6,7,8,9]
  ReactDOM.render(
    <Table number={num}/>,
    document.getElementById('app')
  )
  </script>
</body>

</html>

别忘了引入React文件幺！！！！

在这里插入图片描述

菜兔子成长记

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react下的九九乘法表

九九乘法表
复制链接

扫一扫

react下的九九乘法表

for循环

map循环

“相关推荐”对你有帮助么？