从 2017 react-router react-transition-group 示例工作，其中内容组件不呈现答案

【问题标题】：Working from a 2017 react-router react-transition-group example where content components don't render从 2017 react-router react-transition-group 示例工作，其中内容组件不呈现
【发布时间】：2018-10-03 00:44:48
【问题描述】：

演示和代码 => 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 migration guide，我认为问题实际上是我的转换组件，我不知道如何解决。

【问题讨论】：

标签： javascript reactjs react-router react-transition-group

【解决方案1】：

我只是为自己解决了这个问题，但TransitionGroup 预计它的直系子级是Transition 类型。组件本身实际上并没有对此进行任何验证，因此它只会在所有这些子节点上添加 in 和 onExit 道具。因为在这种情况下您的孩子是样式 div，所以这些属性无效，因此您会收到这些警告。如果您将组件包装在 Transition 或 CSSTransition 中，这些警告就会消失。

【讨论】：