reactjs - 如何正确实现页面转换的 React 转换组
问题描述
我整天都在扯头发,试图让它发挥作用。我注意到的是,无论出于何种原因,转换类 (classNames="fade") 永远不会应用于页面元素。因此,当我从一个页面导航到另一个页面时,会在短时间内(超时时间)显示两个页面组件。
我应该拥有 600 毫秒的时间...
<div class="RTG">
<div class="page fade-appear fade-enter fade-enter-active"> <!--
destination component HTML --></div>
<div class="page fade-exit fade-exit-active"> <!-- start component HTML --></div>
</div>
我得到的是..
<div class="RTG">
<!-- "fade..." classes never applied to the child nodes" -->
<div class="page"> <!-- destination component HTML --></div>
<div class="page"> <!-- start component HTML --></div>
</div>
然后在 600 毫秒超时后,我只剩下...
<div class="RTG">
<div class="page"> <!-- destination component HTML --></div>
</div>
注意 1:我将“RTG”类名放在 TransitionGroup 组件上只是为了验证我的“页面”类组件实际上是 TransitionGroup 组件的直接后代。不存在任何其他原因。
注意 2:我正在使用 react-transition-group@2.4.0 因为我与最新版本存在兼容性问题。
AppRouter.js
import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
const AppRouter = () => (
<Router history={history}>
<Route render={({location}) => {
return (
<TransitionGroup className="RTG">
<CSSTransition
key={location.key}
timeout={600}
classNames="fade"
>
<Switch location={location}>
<PublicRoute path="/" component={LoginPage} exact={true} />
<PrivateRoute path="/dashboard" component={ExpenseDashboardPage} />
<PrivateRoute path="/create" component={AddExpensePage} />
<PrivateRoute path="/edit/:id" component={EditExpensePage} />
<Route component={NotFoundPage} />
</Switch>
</CSSTransition>
</TransitionGroup>
);
}} />
</Router>
);
export default AppRouter;
PrivateRoute.js
export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route {...rest} component={(props) => (
isAuthenticated ? (
<div className="page">
<Header />
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
)} />
);
const mapStateToProps = (state) => ({
isAuthenticated: !!state.auth.uid
});
export default connect(mapStateToProps)(PrivateRoute);
公共路由.js
export const PublicRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route {...rest} component={(props) => (
isAuthenticated ? (
<Redirect to="/dashboard" />
) : (
<div class="page">
<Component {...props} />
</div>
)
)} />
);
const mapStateToProps = (state) => ({
isAuthenticated: !!state.auth.uid
});
export default connect(mapStateToProps)(PublicRoute);
适用的 CSS 样式
.page {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fade-appear,
.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-appear-active,
.fade-enter.fade-enter-active {
opacity: 1.0;
transition: opacity 300ms linear 150ms;
}
.fade-exit {
opacity: 1.0;
}
.fade-exit.fade-exit-active {
opacity: 0;
transition: opacity 150ms linear;
}
解决方案
显然,您需要包装<Switch>
在父组件中。
CSSTransition
工作,因为它会尝试将classNames
其作为道具注入其孩子。这意味着子元素将需要获取这些道具并作为classNames
. 因此,您将需要包装<Switch>
到另一个组件中以确保此机制正常工作。
const AppRouter = () => (
<Router>
<Route
render={({ location }) => {
return (
<TransitionGroup className="RTG">
<CSSTransition key={location.key} timeout={600} classNames="fade">
<div>
<Switch location={location}>
<PublicRoute path="/" component={LoginPage} exact={true} />
<PrivateRoute
path="/dashboard"
component={ExpenseDashboardPage}
/>
<PrivateRoute path="/create" component={AddExpensePage} />
<PrivateRoute path="/edit/:id" component={EditExpensePage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</CSSTransition>
</TransitionGroup>
);
}}
/>
</Router>
);
推荐阅读
- laravel - 如何在 laravel 和 vuejs 中实现 Auth::check()
- python - 如何在 tf.data.Dataset 生成器中使用 tf.keras 模型?
- javascript - Toastr 用于表单验证
- python - Windows 使用 python 2.7 而不是 3.6
- php - 上传文件不再在公共网站上工作,但在本地工作?
- typescript - 是否可以将 `disableCSSOMInjection` 与 TypeScript 一起使用?
- javascript - JS 承诺或异步等待作为对象承诺返回
- swift - 在核心数据中使用索引来获取特定的二进制数据
- amazon-web-services - 长期使用 rds.DatabaseInstanceFromSnapshot 是否安全?
- dom - 为什么现代浏览器还没有使 DOM 数据流/状态驱动来支持现代 Web 应用程序*没有框架*