标签：map 封装 render react source let listI 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"));

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

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

标签：map,封装,render,react,source,let,listI,jsx
来源： https://blog.csdn.net/qq_52522995/article/details/120585320

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。