react-transition-group

Element type invalid : expected string in react-transition-group

由 烂漫一生 提交于 2019-12-25 03:42:34
问题 As mentioned in this answer here : why is react-addons-css-transition-group not working here? , I tried using the react-transition-group module but it gives the following error when I start react. How do I fix this ? Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Material UI: bug with react transition group v 2.2.0

由 吃可爱长大的小学妹 提交于 2019-12-24 07:20:54
问题 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, .

why is react-addons-css-transition-group not working here?

由 萝らか妹 提交于 2019-12-12 14:30:51
问题 import CSSTransitionGroup from 'react-addons-css-transition-group' ; class VariableDefinitions extends Component { render() { const { idToVarStates } = this.props; const varHtmlList = Object.keys(idToVarStates).map(id => { return ( <CSSTransitionGroup transitionEnterTimeout={1000} transitionLeaveTimeout={1000} transitionName="fade" key={id} > <VariableDefine id={id} key={id} {...this.props} /> </CSSTransitionGroup> ); }) }} This is how I am using the transition group . Here are my classes in

React CSSTransition wrong class used on exit

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-12 14:08:48
问题 UPDATE: For those facing the same problem: I found a similar issue posted on the git page of ReactTransitionGroup with the solution in there: https://github.com/reactjs/react-transition-group/issues/182. To be honest, 90% of the solution blew right over my head and I don't understand much of it at all, this is the only part that made sense to me(taken from React TransitionGroup and React.cloneElement do not send updated props which is linked the git issue): Passing Props to Leaving Children?

dynamic page sliding animation with React Router v4 and react-transition-group v2

由 人走茶凉 提交于 2019-12-11 01:58:22
问题 I asked a question before about how to realize the page sliding animation: page sliding animation with React Router v4 and react-transition-group v2. After that, I got a more difficult problem. function getPathDepth(location) { let pathArr = (location || {}).pathname.split('/'); pathArr = pathArr.filter(n => n !== ''); return pathArr.length; } class Routers extends React.Component { constructor(props, context) { super(props, context); this.state = { prevDepth: getPathDepth(props.location) };

page sliding animation with React Router v4 and react-transition-group v2

由 吃可爱长大的小学妹 提交于 2019-12-05 00:11:49
问题 I'm using React Router v4 and react-transition-group v2 to test the page sliding animation. const RouterMap = () => ( <Router> <Route render={({ location }) => <TransitionGroup> <CSSTransition key={location.pathname.split('/')[1]} timeout={500} classNames="pageSlider" mountOnEnter={true} unmountOnExit={true}> <Switch location={location}> <Route path="/" exact component={ Index } /> <Route path="/comments" component={ Comments } /> <Route path="/opinions" component={ Opinions } /> <Route path=

page sliding animation with React Router v4 and react-transition-group v2

由 Deadly 提交于 2019-12-03 16:11:07
I'm using React Router v4 and react-transition-group v2 to test the page sliding animation. const RouterMap = () => ( <Router> <Route render={({ location }) => <TransitionGroup> <CSSTransition key={location.pathname.split('/')[1]} timeout={500} classNames="pageSlider" mountOnEnter={true} unmountOnExit={true}> <Switch location={location}> <Route path="/" exact component={ Index } /> <Route path="/comments" component={ Comments } /> <Route path="/opinions" component={ Opinions } /> <Route path="/games" component={ Games } /> </Switch> </CSSTransition> </TransitionGroup> } /> </Router> ) And the
订阅 react-transition-group