资讯专栏INFORMATION COLUMN

基于 react 的Java web 应用—— 组件复用(后续需更新)

kel / 2292人阅读

摘要:前言实习第二周,被告知要用与导师进行基于的的开发,由于这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了组件的复用实现基本的需求之后,校阅代码时,发现组件内有大量相似的代码,代码不够简洁,自然而然想到组件的复用。

前言

实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了...

组件的复用

实现基本的需求之后,校阅代码时,发现 A 组件内有大量相似的代码,代码不够简洁,自然而然想到组件的复用。

先上demo:



    
    Title
    
    
    


    

以上的demo 的代码注释已经尽量详细,这里有个至今较为困惑的点:父子组件的关系明确;我的简单理解是;同一个的Child 组件 ,定义时,它为子组件,而在使用调用时,则为父组件; 若有错误,欢迎大家的指正!

写完demo,结合项目,开始改改改...

该项目属于老项目,现在的工作是在原来的基础上新增部分类似的功能板块,同时做相关的优化

项目组件文件夹的结构目录
     app
         components
               ConsumeBill.jsx -----A 组件=demo中的HelloReact
               ChildBill.jsx  ------Child 组件
               ....
          ...
      ...
         

在A组件中需要引入Child 组件,在其 render方法中多次使用 Child组件 。[考虑代码阅读:将Child组件以外部文件的方式引入;若Child组件的HTML 代码非常简短,可无需外部引入,同demo中类似直接放在 A组件的React.createClass语句中] ;

继续先上demo:



    
    Title
    
    
    


*注意: JS语句 写在Father组件中return [return 里是React语句]外面,在Father 组件的 render方法*里面

上面例子的demo:HelloReact 与 Child 组件是在同一文件(组件)内;外部引入呢?只要的Child部分代码 以外部文件引入则可,后续补充。






文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89765.html

相关文章

  • UI大全:前端UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 评论0 收藏0
  • UI大全:前端UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    church 评论0 收藏0
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假

    摘要:中国互联网络信息中心发布的中国互联网络发展状况统计报告显示,截至年月,我国网民规模达亿人,微信月活亿支付宝月活亿百度月活亿另一方面,中国手机占智能手机整体的比例超过,月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的? 原创: 嘉宾-张楠 开源中国 以往我们说某一功能跨多端,往往是指在诸如 PC、移动等不同类型的设备之...

    GraphQuery 评论0 收藏0

发表评论

0条评论

kel

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<