リアクショントランジショングループ初回使用時に問題が発生しました

Question

おはよう！私はReactトランジショングループライブラリをテストするためにこのコードを書いて、最終的にはこのエラーに悩まされています。スクリプトが実行され、ページ上にデータが埋め込まれたフォームが表示されますが、送信ボタンをクリックするとフォームが消えません。エラー参照の説明：失敗した小道具のタイプ：小道具timeoutは、CSSTransitionに必要事項としてマークされていますが、その値はundefinedです。in CSSTransition（app.jsx：24） （in 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が混在しているようです。まったく異なるAPIを持つv2を使用しています。