1. 效果
2. 场景
- css 效果实现:可以看到效果图中就是一个图片从小到大的切换动画效果,这个效果很简单,使用 css 的 transform 的 scale 来实现图片的从小到大的效果,切换就更加简单了,不管是 opacity 还是 visibility 都可以实现图片的隐藏和显示的切换。
- React.Children.map :使用 React.Children.map 获取子元素,然后给子元素添加一层,在添加这一层实现 css 的动画效果。
3. 获取子元素列表和数量
3.1 实现分析
- 申明一个子元素计数器 childCount;
- 调用 React.Children.map 函数对 props.children 进行处理;
- 调用 React.isValidElement 判断是否是 react 元素,不是就直接返回 null;
- 是就计数器 childCount 累加,同时返回子元素;
- 最后返回处理后的子元素