Question

我将子组件从条件渲染切换为由<Fade />包装，但是Fade根本不起作用，两个组件始终显示。这是当前代码：

  // inside top level component
  {/*{adminView === bodyViews.addNewCoupon &&*/}
   <Fade
     in={Boolean(adminView === bodyViews.addNewCoupon)}
     timeout={2000}
   >
     <AddCouponForm />
   </Fade>
  {/*}*/}

  {/*{adminView === bodyViews.viewCurrentCoupons &&*/}
   <Fade
     in={Boolean(adminView === bodyViews.viewCurrentCoupons)}
     timeout={2000}
   >
    <ViewCoupons />
   </Fade>
  {/*}*/}

基于此处的api：https://material-ui.com/api/fade/我相信in设置为true应该会使组件淡入。这用于在注释掉的一元代码中引起条件渲染，但似乎不起作用在in值之内。发生什么错误了？

更新

当我评论自定义组件并插入<p>Section 1/2</p>之类的东西时，淡入淡出起作用。有关自定义成分的某些信息必须导致淡入淡出

Answer 1

该问题专门追溯到“自定义”组件：它们似乎不能作为<Fade />的直接子代工作。通过将自定义组件子代包装在div中解决了问题。

  <Fade
    in={ Boolean(adminView === bodyViews.addNewCoupon) }
    timeout={ 4000 }
  >
    <div>
      <AddCouponForm />
    </div>
  </Fade>     

  <Fade
    in={ Boolean(adminView === bodyViews.viewCurrentCoupons) }
    timeout={ 4000 }
  >
    <div>
      <p>Section 2</p>
      <ViewCoupons />
    </div>
  </Fade>

作为一个旁注，Fade似乎也有多个孩子的问题。因此，所有子级都应放在单个div元素内。

材质UI淡入淡出组件不显示，隐藏或淡入淡出组件

1 个答案: