我正在 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
.
我不知道为什么它在一个方向上起作用而在另一个方向上不起作用。 这一定是我忽略的一些小事,但我看不到。 非常感谢您的帮助。
最佳答案
<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 - ReactJS、TypeScript 中的数组动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48082019/