材质用户界面:React Transition Group v 2.2.0的错误 [英] Material UI: bug with react transition group v 2.2.0
问题描述
我正在使用<Transition>
,如React的主文档中所述过渡小组.
I'm using <Transition>
as explained in main documentation of React Transition Group.
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(尤其是Button)上却不能很好地工作:当我单击它们时,它们后面会出现一个白色div:
It works, but not so well with Material UI, especially with Buttons, everywhere on my app: when I click on them, appears a white div behind them:
<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>
以及控制台中的奇怪错误:
and this weird error in console:
Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <div> tag. Remove these props from the element.
那些道具是关于过渡的,但是我不明白这个问题.
Those props are about Transition, but I can't understand the problem.
我正在使用React 15.6.1,Material ui 0.18.7和React Transition Group 2.2.0
I'm using React 15.6.1, Material ui 0.18.7 and React Transition Group 2.2.0
推荐答案
我今天遇到了这个错误,我在他们的github上记录了一个issue + repro案例.
I encountered this bug today, and I logged an issue + repro case on their github.
https://github.com/callemall/material-ui/issues/8046
(再现: https://codesandbox.io/s/q9o5q0l5nw )
我已经在v1.0.0-beta.8中进行了测试,并且看起来工作正常( https://codesandbox.io/s/r5nplz89nn ).
I have tested in v1.0.0-beta.8 and it looks like it's working fine (https://codesandbox.io/s/r5nplz89nn).
该项目的立场实质上是"material-ui v0.x是遗留代码". 因此,您可以选择:禁用整个应用中的波动,通过PR对其进行修复,或移至未完成的v1 beta分支.
The project's stance is essentially "material-ui v0.x is legacy code". So your options are either; disable ripples across your app, fix it for them via a PR, or move to the unfinished v1 beta branch.
这篇关于材质用户界面:React Transition Group v 2.2.0的错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!