reactjs - ReactJS，TypeScript中的数组动画

我正在做一个滑动树导航组件的反应。
向前看时，新列表从右侧滑入，旧列表从左侧滑出。
我用<TransitionGroup>和<CSSTransition>来做。
我正在从数组中删除旧列表并将新列表添加到其中，每个项都已正确设置了键。它起作用了。
但是当你回去的时候却没有。
我这里有个演示：
https://codesandbox.io/s/1wq71p5ly3
当导航返回时，在<App>组件状态中，我翻转布尔值并将其提供给<TreeContainer>组件，因此在<CSSTransition>内部可以使用不同的CSS类（基本上反转translate的方向）。
当从某个数组中移除和添加数组（然后设置状态）时，“cc>”被称为3次（我想删除一个，一个用于加法，一个用于…我不知道）。当向前导航时，这仍然可以，但是当我向后导航时，正如您在演示中看到的那样，我在<TreeContainer>中记录了布尔值，在用<TreeContainer>显式设置了它在父级中的值之后，这就是我得到的：

false
true
false

它仍然被称为三次，但是一旦布尔值为“cc>”，即使我将它显式设置为setState。
我不知道为什么它在一个方向工作，为什么在另一个方向不工作。
一定是我忽略了一件小事，但我看不见。
我非常感谢你的帮助。

最佳答案

<TreeContainer>被调用3次，因为：对每个新项和将被删除的每个项都调用它。
当您转到Back时，新的状态永远不会传递到<TreeContainer>，但是css transition会使用旧的forward属性来执行它。
要改变它，你需要两步状态转换。我建议像这样使用setstate回调：

  navForward(branch: INavTreeElement) {

    var fullTreeUI = this.state.treeUI.slice();
    var filteredDataTree = findById(this.props.NavDataTree, branch.id);
    var nextTreeUI: any = {
      branch: filteredDataTree.children.map((i: any) => { return { name: i.name, id: i.id }; }),
      id: Math.random().toString(36).substring(2)
      + (new Date()).getTime().toString(36)
    };

    treeStack.push(this.state.treeUI.slice()[0]);
    fullTreeUI.push(nextTreeUI);
    fullTreeUI.shift();

    this.setState({
      forward: true,
    }, () => {
      this.setState({
        treeUI: fullTreeUI,
        depth: (this.state.depth + 1)
      });
    });
  }

  navBackward() {

    var fullTreeUI: any = this.state.treeUI.slice();
    fullTreeUI.unshift(treeStack.pop());
    fullTreeUI.pop();

    this.setState({
      forward: false,
    }, () => {
      this.setState({
        treeUI: fullTreeUI,
        depth: (this.state.depth - 1)
      });
    });
  }

这解决了你的问题。干杯

关于reactjs - ReactJS，TypeScript中的数组动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48082019/