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

美好的一天！我编写了这个代码来测试React转换组库，并最终陷入了错误。该脚本得到运行，我看到页面上的数据填充表单样式，但是当我单击提交按钮表单不会消失。错误参考说明：失败的道具类型：道具timeout在CSSTransition中标记为需要，但其值为undefined。（在app.jsx：24） in App（at index.js：7）但是transitionAppearTimeot = {1500}！第一次使用React Transition Group时遇到问题

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;

来源

2017-07-13 Ravdel

错误消息是非常具体的。 <CSSTransition>需要道具timeout但你不通过任何东西。另外你的其他道具不是什么<CSSTransition>预计。

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

来源

2017-07-13 09:12:56 trixn

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

回答

相关问题