react -jsx 就是用js语法封装了各种组件,通过挂载组件实现各种功能 ( ALL in JS )
1.map函数
一个数组使用map函数可以快速遍历应对其进行操作;
例1:一个数组中含有一些数,遍历输出数组中的数乘以2后的结果
let source=[1,2,2,3,5,9]
let double=source.map(i=>i*2)
console.log(double);
运行结果:
例2 :使用列表的方式展示数据(封装容器,静态传参)
let source=[1,2,2,3,5,9]
let listI=source.map(i=><li>{i*2}</li>)
function ListC() {
return(
<ul>
{listI}
</ul>
)
}
ReactDOM.render(<ListC/>, document.getElementById("app"));
需要使用函数挂载的方式进行实现,结果如下:
(封装容器,动态传参)
let source=[1,2,2,3,5,9]
function ListC(props) {
let source=props.data
let listI=source.map(i=><li>{i*2}</li>)
return(
<ul>
{listI}
</ul>
)
}
ReactDOM.render(<ListC data={source}/>, document.getElementById("app"));
封装容器,动态传参,动态获取后台传递来的数据,结果如下:
学无止境,每天进步一点点