问题: 如题。
具体:
我有一个大组件TransactionComponent, 组件内有很多Link
, 现在,如果我点击Link
后,React可能加载两个组件中的任意一种,取决于Link里面的参数,如status。现在我纠结的是是不是要做TransactionComponent
的子路由,或者是创建同级别的路由。
TransactionComponent
|---------------|
|---<Link>订单</Link>----|
|---<Link>订单</Link>----|
|---<Link>订单</Link>----|
|---<Link>订单</Link>----|
|---------------|
当Link
激活时,会有两种选择:
Component(或者SubComponent)
|--------------|
|------数据------|
|------订单成功----|
|--------------|
|--------------|
Component(或者SubComponent)
|--------------|
|------数据------|
|------订单失败----|
|--------------|
|--------------|
然后令我纠结的问题来了,应该怎么设计我的路由?每个订单都有一个唯一的id
希望大家给点建议,谢谢
我在走查我们项目代码时,也发现了同样的问题,导致这样问题是没有理解,组件(视图)应该是高内聚,低耦合
,参照这个六个字,反复读几遍,反复理解;什么叫高内聚?什么叫低耦合?一个组件的所有东西都应该在组件内完成,如果把一个组件中的内容拆成两个,反而会耦合到父层,这样以耦合,代码维护起来相当麻烦
这种需求应该把订单设计成一个单一的 Component 比如 OrderComponent
,并且在 Routes 里绑定 path 比如:
<Route path='/orders/:id' component={OrderComponent} />
订单不同状态应该由 OrderComponent
从后端读取到的数据来决定应该加载哪部分的子 Component 或者只在渲染的时候根据状态输出不同的字符
这样的话 TransactionComponent
就不用关心 Order 的状态了,只需在其 render
方法里循环输出所有 Order 的链接即可,比如:
{
this.props.orders.map(function(order){
let order_id = "/orders/" + order.id;
return <Link to={order_link}>订单:{order.name}</Link>;
})
}