2.react-练习数组渲染之99乘法表-史上最简单

# 思路分析

9行,我们想象成9个div即可,每一行有n个span,span中装的是运算内容

# 代码实现

<script type="text/babel">
  let cf = [];
  for (let i = 1; i < 10; i++) {
    let l = [];
    for (let j = 1; j < i + 1; j++) {
      l.push(
        <span key={j}>{j}*{i}={j * i}</span>
      )
    }
    cf.push(
      <div key={i}>{l}</div>
    )
  }
  ReactDOM.render(cf, document.querySelector('#app'));
</script>

循环体中必须加key属性且不能重复

还需要css来排版变好看

<style>
  span {
    margin: 5px;
    display: inline-block;
    min-width: 4rem;
  }
</style>

# 效果展示

完美!

本文完