材料 UI：反应过渡组 v 2.2.0 的错误答案

【问题标题】：Material UI: bug with react transition group v 2.2.0材料 UI：反应过渡组 v 2.2.0 的错误
【发布时间】：2018-01-17 10:44:32
【问题描述】：

我正在使用 <Transition>，如 React Transition Group 的 main documentation 中所述。

import React from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';

const defaultStyle = {
 transition: `opacity 300ms ease-in-out`,
 opacity: 0,
};

const transitionStyles = {
 entering: { opacity: 1 },
 entered: { opacity: 1 },
};

const Fade = ({
 in: inProp,
 children,
}) => (
 <Transition in={inProp} timeout={300}>
  {state => (
   <div
    style={{
      ...defaultStyle,
      ...transitionStyles[state],
    }}
  >
    {children}
  </div>
)}
</Transition>
);

Fade.propTypes = {
 in: PropTypes.bool.isRequired,
 children: PropTypes.node.isRequired,
};

export default Fade;

它可以工作，但在 Material UI 上效果不佳，尤其是按钮，在我的应用程序中随处可见：当我点击它们时，它们后面会出现一个白色 div：

<div in="false" style="position: absolute; top: -88.218px; left: -97.218px; height: 220.436px; width: 220.436px; border-radius: 50%; background-color: rgb(255, 255, 255);"></div>

控制台中出现这个奇怪的错误：

Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <div> tag. Remove these props from the element.

那些道具是关于过渡的，但我无法理解问题。

我正在使用 React 15.6.1、Material ui 0.18.7 和 React Transition Group 2.2.0

【问题讨论】：

标签： reactjs material-ui react-transition-group

【解决方案1】：

我今天遇到了这个错误，我在他们的 github 上记录了一个 issue + repro 案例。

https://github.com/callemall/material-ui/issues/8046

（复制：https://codesandbox.io/s/q9o5q0l5nw）

我已经在 v1.0.0-beta.8 中进行了测试，它看起来运行良好 (https://codesandbox.io/s/r5nplz89nn)。

该项目的立场本质上是“material-ui v0.x 是遗留代码”。所以你的选择是；在您的应用中禁用涟漪效应，通过 PR 为它们修复它，或移至未完成的 v1 beta 分支。

【讨论】：

谢谢。目前，我使用 CSSTransitionGroup 1.2.0 版解决了问题。在我的下一个项目中，我肯定会使用 Material UI v1。