[英]Working from a 2017 react-router react-transition-group example where content components don't render
演示和代码 => https://codesandbox.io/s/73ymn2k911
根据我通过开发工具的观察,它最初知道放置组件的位置,但忘记设置opacity: 1
或删除旧组件
我怀疑问题出在 app.js请参阅下面的更新。
import React, { Component } from "react";
import { Route, matchPath } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";
import { firstChild } from "../utils/helpers";
import TopBar from "./top_bar";
import Home from "./home";
import Projects from "./projects";
import ProjectItem from "./project_item";
import Missed from "./missed";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
projects: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
return response.json();
})
.then(json => {
this.setState({
projects: json.slice(0, 7)
});
});
}
render() {
return (
<div className="wrapper">
<TopBar />
<Route
render={({ location }) => (
<TransitionGroup component="main">
<AnimatedSwitch
key={location.pathname}
location={location}
>
<Route exact path="/" component={Home} />
<Route
exact
path="/projects"
render={props => (
<Projects {...props} projects={this.state.projects} />
)}
/>
<Route
path="/projects/:id"
render={props => (
<ProjectItem {...props} projects={this.state.projects} />
)}
/>
<Route component={Missed} />
</AnimatedSwitch>
</TransitionGroup>
)}
/>
</div>
);
}
}
但我可能是错的。 单击Codesandbox.io上的导航链接后,它会向控制台打印两个错误,而我的实时测试站点上的 chrome 开发工具未报告这些错误:
Warning: Unknown event handler property `onExited`. It will be ignored.
Warning: Received `true` for a non-boolean attribute `in`.
这完全基于我为旧依赖项找到的示例,该示例去年发布到博客上。 我正在尝试从示例中学习,但很难理解每 6 个月更改一次的内容。
如果能帮到你,谢谢!
更新:我一直在查看 react-transition-group v1 到 v2 迁移指南,我认为问题实际上是我的过渡组件,我不知道如何解决。
我刚刚为自己解决了这个问题,但TransitionGroup
预计它的直接子代是Transition
类型。 该组件本身实际上并没有做任何这验证,所以它只会拍in
和onExit
道具在所有这些子节点。 因为在这种情况下你的孩子是一个样式化的div
,这些属性无效,所以你会收到这些警告。 如果您将组件包装在Transition
或CSSTransition
,这些警告就会消失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.