前端 react-render 中有趣的函数/玩法（ jsx 语法 ）

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.datalet listI=source.map(i=><li>{i*2}</li>)return(<ul>{listI}</ul>)}ReactDOM.render(<ListC data={source}/>, document.getElementById("app"));

封装容器，动态传参，动态获取后台传递来的数据，结果如下：

                                                      学无止境，每天进步一点点