reactjs - Material UI Fade 组件不显示、隐藏或淡出组件

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 中不起作用。值(value)。正在犯什么错误？

更新

当我评论自定义组件并插入类似 <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 似乎也有不止一个 child 的问题。因此，所有 child 都应该进入单个 div 元素。