前端 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);

运行结果:

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

 例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"));

 需要使用函数挂载的方式进行实现,结果如下

 

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

 (封装容器,动态传参

    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"));

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

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

 

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

上一篇:SpringBoot——整合Shiro完成登录检验,java新技术框架


下一篇:react 常见死循环报错问题