# 思路分析
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>
# 效果展示
完美!
本文完