reactjs - ReactJS、TypeScript 中的数组动画

Question

我正在 React 中制作一个滑动树导航组件。向前移动时，新列表从右侧滑入，旧列表从左侧滑出。我用 <TransitionGroup> 来做和 <CSSTransition> .我正在从数组中删除旧列表并向其中添加新列表，每个项目都已正确键入。有用。然而，当返回时它不会。

我这里有一个演示: https://codesandbox.io/s/1wq71p5ly3

向后导航时，在 <App>组件状态我正在翻转一个 bool 值并将其提供给 <TreeContainer>里面的组件<CSSTransition>可以应用不同的 CSS 类(基本上反转 translate 的方向)。

当出于某种原因从数组中删除和添加(然后设置状态)时 <TreeContainer>被调用了 3 次(我猜一次是删除，一次是添加，一次是……我不知道)。这在向前导航时仍然很好，但是当我向后导航时，正如您在演示中看到的那样，我在 <TreeContainer> 中记录了 bool 值。在使用 setState 在父级中显式设置其值之后这就是我得到的:

false
true
false

还是调用了三次，但是一次 bool 值是true ，即使我将其明确设置为 false .

我不知道为什么它在一个方向上起作用而在另一个方向上不起作用。这一定是我忽略的一些小事，但我看不到。非常感谢您的帮助。

Answer 1

<TreeContainer>被调用 3 次是因为:每个新项目和每个将被删除的项目都会调用它。

当你去的时候Back新状态永远不会传递给 <TreeContainer> , 但 CSS Transition 无论如何都会用旧的 forward 执行它 Prop 。

要更改它，您需要进行两步状态转换。我建议像这样使用 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)
      });
    });
  }

这解决了您的问题。干杯