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

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

 

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