Question

早上好，

很难将我的React CSS Transition类应用于我的DOM元素。我已经完成了以下所有工作：

参考this question, to check correct use case和this other question making sure I am using a key attribute even when rendering one child.

如果我理解正确the library has migrated以及我们import图书馆的方式有点不同，那就让我们看一下我正在使用的内容。

相关代码：

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>
        )
      }
    }

好的，你点击界面中的按钮，然后锦标赛编辑器组件从display: none变为display: flex。我的理解是，这会触发要应用和删除的类，但它们永远不会被应用我成功的唯一方法就是在它们中添加transitionAppear={true}属性只是坐在那里永远不会消失。

我做得不好？这让我很难过，因为我已经成功地与旧图书馆合作，我不知道为什么这给我带来了太多麻烦。我很感激一点帮助。

干杯

React CSS Transitions的另一个例子是不应用类

0 个答案: