第一次使用 React Transition Group 时遇到问题

Question

再会！我编写这段代码是为了测试 React 过渡组库，但最终遇到了错误。脚本开始运行，我在页面上看到数据填充表单，但是当我单击提交按钮时，表单不会消失。错误参考描述： 失败的 prop 类型： 该 proptimeout在 中被标记为必需CSSTransition，但其值为undefined。在CSSTransition（在app.jsx：24）中在App（在index.js：7）中但是transitionAppearTimeot = {1500}！

import React, { Component } from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransition';
import './app.css';
import Form from './components/Form';
class App extends Component {
constructor() {
    super();
    this.state = {
        mounted: true,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
};
handleSubmit(event) { 
    event.preventDefault();
    this.setState = {
        mounted: false
    }
    console.log(this.state);
};

render() {
    return (
        <div className="app">
            <CSSTransitionGroup
                transitionName="fade"
                transitionAppear={true}
                transitionAppearTimeout={1500}
                transitionEnter={false}
                transitionLeave={true}
                transitionLeaveTimeout={300}>
                {this.state.mounted && <Form onSubmit=
                {this.handleSubmit} />}
            </CSSTransitionGroup>
        </div>
    );
  }
}

export default App;

Answer 1

错误消息非常具体。<CSSTransition>需要一个道具timeout，但你不传递任何东西。另外你的其他道具也不是<CSSTransition>预期的那样。

我猜你把旧的react-transition-group v1和新的react-transition-group v2搞混了。您正在使用 v2，它具有完全不同的 API。