Javascript React CSS转换不应用类的另一种情况

我正在尝试将我的React CSS转换类应用于我的DOM元素。我已经完成了以下所有工作：

参考和

如果我理解正确，并且我们导入库的方式有点不同，那么让我们看看我使用的是什么

相关代码：

import {CSSTransitionGroup} from "react-transition-group";

class NewTournament extends React.Component{
render(){



      const style = {

          active: { display: "flex", flex: 5 },
          inactive: null
      }

      const dynamic = this.props.editTournament != null ? style.active : style.inactive

      return(
        <div className="left-column">

            <div className="tournament-creator">

                  <div id="banner">
                    <h1>Build A Tournament Here</h1>
                  </div>  

                  <form action="" className="tournamentBuilder">
                    <input type="text" placeholder="Tournament Name" ref="nameRef" onChange={() => this.recordName()}/>
                    <input type="number" defaultValue={prelims} ref="prelimRef" onChange={() => this.updatePrelims()} />
                    <input type="number" defaultValue={outRounds} ref="outRoundRef" onChange={() => this.updateOutround()}/>
                    <input type="text" placeholder="Notes" ref="notesRef" onChange={() => this.recordNote()}/>
                  </form>

                  <div id="submitButton" onClick={() => this.createTournament()}>
                    Create Tournament
                  </div>


            </div>
            <CSSTransitionGroup   className="tournament-editor"
                                  component="div"
                                  transitionName="editBoxRail"
                                  transitionEnterTimeout={10000}
                                  transitionLeaveTimeout={10000}
                                  style={dynamic}>

                  <TournamentEditor key="editor" />
            </CSSTransitionGroup>

        </div>
        )
      }
    }

从“反应转换组”导入{CSSTransitionGroup}；
类NewTournament扩展了React.Component{
render（）{
常量样式={
活动：{显示：“flex”，flex:5}，
非活动：空
}
const dynamic=this.props.editTornament！=null？style.active:style.inactive
返回(
在这里建立一个锦标赛
this.recordName（）}/>
this.updatePrims（）}/>
this.updateOutound（）}/>
this.recordNote（）}/>
this.createTornament（）}>
创建锦标赛
)
}
}

因此，单击UI中的按钮，然后锦标赛编辑器组件从

display:none

转到

display:flex

。我的理解是，这将触发应用和移除类，但它们从未被应用我成功地做到这一点的唯一方法是添加

transitionAppear={true}

属性，它们就在那里，永远不会消失

---

我做得不对的是什么？这让我很困惑，因为我已经成功地使用了旧库，我不知道为什么这会给我带来这么多麻烦。

如果您使用的是最新版本的React Transition Group，请检查此示例。这在单个元素上使用了一个转换：这使用了带有

的转换组：值得注意的是，语法与您发布的有点不同，但我也不确定您是否正在使用最新版本。感谢您回复我，这看起来确实与我当前使用的有很大不同。今晚晚些时候，我将讨论这个问题，谢谢你提供了这个有用的例子！