材质用户界面：反应过渡组的bug 2.2.0

我使用的是<Transition>，如在React Transition Group的main documentation中所解释的。材质用户界面：反应过渡组的bug 2.2.0

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;

它的工作原理，但不是这么好材料UI，特别是按钮，到处都是我的应用程序：当我点击他们，出现在他们身后的白色格：

<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.

那些道具都是关于Transition的，但我无法理解这个问题。

我使用15.6.1做出反应，材料UI 0.18.7和应对过渡小组2.2.0

来源

2017-08-09 timhecker

我今天遇到了这个错误，我登录他们的github上的问题+摄制情况。

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分支。

来源

2017-09-05 07:21:18

谢谢。目前，我解决了使用CSSTransitionGroup版本1.2.0。在我的下一个项目中，当然，我正在使用Material UI v1。 – timhecker

材质用户界面：反应过渡组的bug 2.2.0

回答

相关问题