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价值范围内工作。正在犯什么错误？

更新

当我评论自定义组件并插入类似的东西时<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 元素。

Answer 2

Fade通过 prop 更新子组件styles，如果您使用自定义组件，则需要将 ref 转发给子组件并确保 fromprops被Fade传递下来：

const MyComponent = React.forwardRef((props, ref) => {
  return (
    <div {...props} ref={ref}>
      my component
    </div>
  );
});

<Fade in={checked}>
  <MyComponent />
</Fade>

现场演示