ReactJS、TypeScript 中的数组动画

Question

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

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

向后导航时，在 <App> 组件状态下，我正在翻转一个布尔值并将其提供给 <TreeContainer> 组件，因此在 <CSSTransition> 内部有一个不同的 CSS class 可以应用（基本上反转 translate 的方向）。

当出于某种原因从数组中删除和添加（然后设置状态）时，<TreeContainer> 被调用 3 次（我猜一次用于删除，一次用于添加，一次用于...我不知道'不知道）。这在向前导航时仍然很好，但是当我向后导航时，正如您在演示中看到的那样，我在 <TreeContainer> 中明确设置其值后在 setState 中记录了布尔值，这就是我得到了：

false
true
false

它仍然被调用了三次，但是一旦布尔值是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)
      });
    });
  }

这解决了您的问题。干杯

ReactJS、TypeScript 中的数组动画

Array animation in ReactJS, TypeScript

reactjs

typescript

animation