React 动态更新子项item从array数据

// 初始化state
this.state = {
  files: [],
}

// 添加数据到array
this.setState({
  files: [
    ...this.state.files,
    fileInfo
  ]
});

// 动态移除子项从array
removePic(index) {
    this.setState({
      files: this.state.files.filter((_, i) => i !== index)
    })
  }

// 循环显示数据
{state.files.map((file, index) => (
  <li key={index}>
    <span className="del" onClick={this.removePic.bind(this, index)}>
      <a href="javascript:;"><img src="" /></a>
    </span>
    <span className="p_img">
      <a href="javascript:;">
        <img src={file.src} />
      </a>
    </span>
  </li>
))}

 



有疑问或技术交流,扫描公众号一起讨论学习。

更多React在线学习访问:http://each.sinaapp.com/react/index.html

### 实现 React 组件中的自动滑动效果 为了实现在 React 组件中元素的自动滑动效果,可以采用多种方法。以下是几种常见的技术方案: #### 方法一:使用 `IntersectionObserver` API 结合定时器实现自动滚动 通过监听目标元素进入视口的情况来触发滚动行为,并利用 JavaScript 的 `scrollBy()` 或者 `scrollTop` 来控制滚动距离。 ```javascript import React, { useEffect, useRef } from 'react'; function AutoScrollComponent() { const containerRef = useRef(null); useEffect(() => { let intervalId; function handleIntersect(entries) { entries.forEach(entry => { if (entry.isIntersecting && entry.intersectionRatio >= 0.75) { clearInterval(intervalId); return; } // 自动向下滚动一段固定的距离 intervalId = setInterval(() => { if(containerRef.current){ containerRef.current.scrollTop += 10; } }, 200); }); } const options = { threshold: [0.75] }; const observer = new IntersectionObserver(handleIntersect, options); if (containerRef.current) observer.observe(containerRef.current); return () => { clearInterval(intervalId); observer.disconnect(); }; }, []); return ( <div ref={containerRef} style={{ height: '300px', overflowY: 'auto' }}> {/* 子元素 */} </div> ); } ``` 此代码片段展示了如何设置一个察者去监控容器内的子项何时接近底部并启动自动滚动[^3]。 #### 方法二:基于 Swiper 库创建可编程的轮播图或列表 如果希望构建更复杂的交互体验,比如水平方向上的无限循环展示,则推荐借助第三方库如 Swiper。它允许开发者轻松定义触控手势、分页指示符等功能的同时还支持程序化导航至特定索引处。 ```jsx // 安装 swiper 及其样式依赖 npm install swiper @types/swiper --save-dev import React, { useState, useRef } from 'react'; import SwiperCore, { Navigation, Pagination } from 'swiper/core'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css/bundle'; SwiperCore.use([Navigation, Pagination]); export default function MyCarousel({ items }) { const swiperRef = useRef(); const scrollToIndex = index => { if (!swiperRef || !swiperRef.current?.swiper) return; swiperRef.current.swiper.slideTo(index); }; return ( <> <button onClick={() => scrollToIndex(2)}>Go to slide 3</button> <Swiper navigation pagination={{ clickable: true, }} onInit={(el) => swiperRef.current = el} > {items.map((item, idx) => <SwiperSlide key={`slide-${idx}`}> {item.content} </SwiperSlide>)} </Swiper> </> ); } ``` 上述例子说明了怎样集成 Swiper 并提供了一个按钮用于跳转到第三个幻灯片的位置[^2]。 #### 方法三:自定义动画函数配合 CSS 过渡完成平滑滚动 对于简单的上下/左右切换场景,可以直接操作 DOM 节点并通过 CSS transition 属性让位移过程更加流畅自然。 ```css /* styles.css */ .auto-scroll-item { transform: translateY(-100%); opacity: 0; transition: all .8s ease-in-out; } .active { transform: none; opacity: 1; } ``` ```js import React, { useState, useEffect } from 'react'; import './styles.css'; const AutoScroller = ({ children }) => { const [currentIndex, setCurrentIndex] = useState(0); const totalItems = Array.isArray(children) ? children.length : 1; useEffect(() => { const timer = setTimeout(() => { setCurrentIndex(prevIdx => (prevIdx + 1) % totalItems); }, 3000); return () => clearTimeout(timer); }, [totalItems]); return ( <div className="carousel"> {[...Array(totalItems)].map((_, i) => <div key={i} className={`auto-scroll-item ${i === currentIndex ? 'active' : ''}`} > {children[i]} </div>) } </div> ); }; ``` 这段代码实现了每隔几秒钟就更新一次当前显示的内容区块的效果,同时应用了CSS过渡使得视觉上看起来像是连续移动而不是瞬间变化[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值