Question

美好的一天！我编写此代码来测试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;

Answer 1

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

我猜您将新react-transition-group v1与新react-transition-group v2混在一起。您使用的v2具有完全不同的API。

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

1 个答案: