反応遷移グループの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
ありがとうございました。 現時点では、私はCSSTransitionGroupバージョン1.2.0を使用して解決しました。私の次のプロジェクトでは、確かにMaterial UI v1を使用しています。 – timhecker