2017-08-09 5 views
1

反応遷移グループのmain documentationで説明したように<Transition>を使用しています。マテリアルUI:反応遷移グループのバグ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を表示されます。

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

これらの小道具は移行についてですが、私はこの問題を理解できません。私は15.6.1、材料のUI 0.18.7を反応させ、トランジショングループ2.2.0

答えて

0

反応し使用してい

今日はこのバグに遭遇した、と私は彼らのgithubの上の問題+ REPROケースをログに記録しました。

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

(REPRO:https://codesandbox.io/s/q9o5q0l5nw

私はv1.0.0デベロッパー-beta.8でテストしていると、それは(https://codesandbox.io/s/r5nplz89nn)正常に動作しているように見えます。

プロジェクトの立場は本質的に「素材-ui v0.xはレガシーコードです」です。 あなたのオプションもどちらかです。アプリ全体の波紋を無効にしたり、PRを介して修正したり、未完成のv1ベータブランチに移行することができます。

+0

ありがとうございました。 現時点では、私はCSSTransitionGroupバージョン1.2.0を使用して解決しました。私の次のプロジェクトでは、確かにMaterial UI v1を使用しています。 – timhecker

関連する問題