第一次使用 React 过渡组时遇到问题答案

【问题标题】：Having trouble using React Transition Group first time第一次使用 React 过渡组时遇到问题
【发布时间】：2017-07-13 17:12:56
【问题描述】：

美好的一天！我编写了这段代码来测试 React 转换组库并最终陷入错误。脚本开始运行，我看到页面上的数据填充表单设置了样式，但是当我单击提交按钮时表单并没有消失。错误参考描述：失败的道具类型：道具timeout在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;

【问题讨论】：

标签： reactjs reactcsstransitiongroup

【解决方案1】：

错误信息非常具体。 <CSSTransition> 需要一个道具 timeout 但你没有传递任何东西。此外，您的其他道具也不是<CSSTransition> 所期望的。

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

【讨论】：