模仿写组件

第一次在JavaEye上写BLOG,以前在My Opera上写,结果被大陆封了,没办法,就在这里写写好了!

不知道在那里看到别人说用Tiles模仿组件,这次自己在用的时候也这么想,所以也试着这么做,但是做了几个,发现根本不行。当多个组件在一个页面的时候,这样做基本是就是自找麻烦!

首先,组件包括初始化,而且对于一个组件,在不同条件下,有着不同的初始化方式。即使在同一个页面,也可能因为条件不同,初始化也不一样。以前不太明白一个网页里,有多个表单,Struts这样的框架,不适合处理这样的问题,现在总算是明白了。

当一个网页里,有两个表单。第一进入的时候,应该是都是空的,让用户填写。这个简单,应该没有什么问题。当填写了其中一个,然后提交又返回回来。这个时候第一表单就可能切换成表格显示。这个时候还应该为第一表单保留可更改的表单,并且其对应的处理不再是添加,而是更新了。然后填写第二个表单提交后,返回这个页面的时候,就将是两显示信息的表格,同样保留两个可修改的表单。下次,可能再回到现在这个页面,看以前填写的数据,这个时候可能是只读的,也许是可修改的。

现在想想还算简单的问题,当开始编程的时候,就开始乱成一锅粥了。因为普通的MVC只能处理一个操作,复杂的复合型操作就无能为力了,像WebWork能在页面直接访问Action,但是也只能解决显示数据的问题,别的也不行。当然,任何一个复杂的页面都能拆解成几个单一的页面,但是这样并不是最好的。而且页面的维护将成为非常头痛的问题。当然及其复杂的页面,就算是用组件化的框架,也是不可取的,这样会严重加重服务器的负担。

当自己面对一大堆页面的时候,自己真的有哭的冲动。现在真想学一个组件化的框架。或者是一个很容易构建UI的Ajax。
React是一个非常流行的JavaScript库,可以帮助开发者构建用户界面。要实现一个类似于京东物流进度组件的功能,您可以考虑使用React中的组件化设计。 以下是一个简单的示例代码,可以作为您实现该组件的起点: ``` import React from 'react'; function LogisticsProgress({ steps, currentStep }) { return ( <div className="logistics-progress"> {steps.map((step, index) => ( <div key={index} className={`logistics-progress-step ${ index <= currentStep ? 'logistics-progress-step-active' : '' }`} > <div className="logistics-progress-step-icon">{step.icon}</div> <div className="logistics-progress-step-label">{step.label}</div> </div> ))} </div> ); } export default LogisticsProgress; ``` 在上面的代码中,我们定义了一个名为`LogisticsProgress`的React函数组件。该组件需要两个参数:`steps`和`currentStep`。`steps`是一个数组,包含了所有的物流进度步骤,每个步骤都包含一个`icon`和一个`label`属性,分别代表图标和标签。`currentStep`是一个数字,表示当前所处的进度步骤。 在组件的返回值中,我们使用了`map`方法遍历所有步骤,并对每个步骤进行渲染。每个步骤都包含一个图标和一个标签,以及一个样式类名,用于指示该步骤是否处于激活状态。当步骤的索引小于或等于`currentStep`时,该步骤被认为是激活的。 您可以根据自己的需求进行样式设计和功能扩展。希望这能帮助到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值