Question

根据数据，视图会发生变化。并且有一个公共组件，其中插入了内部组件-DetailCmp。 SomeCmp - root cmp

 const SomeCmp = props => (
     <div clas="random">
      ...
      <DetailCmp
          propCmp1={props.someVar === "val" ? <A {...props}/> :<B {...props}/>}
          propCmp2={props.someVar2 === "val" ? <C {...props}/> :<D {...props}/>}
          propCmp3={props.someVar3 === "val" ? <E {...props}/> :<F {...props}/>}
      />
      ...
    );

在DetailCmp中我有

const DetailCmp = props => (
  <div> 
    some components ...
    ...
   {props.propCmp1}
   ...
   {props.propCmp2}
   ...
   {props.propCmp3}
  </div>
)

如何重构这个更具说明性的，

Answer 1

不是传递const router = new Router({ routes: [ { path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { requiresAuth: true }, children: [ { path: 'overview', name: 'Overview', component: Overview, meta: { requiresAuth: true } } ] } ] }) props中的组件，而是传递道具值并将所有条件放在DetailCmp中。

如果你传递了DetaiCmp中的组件，那么不必要的反应必须维护props中有关组件的所有细节，如果你只传递数据并在渲染过程中放置条件则不必在道具中维护这些信息。

像这样：

props

如何在反应中更可靠地重构这部分组件？

1 个答案: